在TD上跨度

Question

我认为一张图片最能描述这一点：JS FIDDLE HERE： http : //jsfiddle.net/fp2Ak/

我要做的是让这些线实际接触。 每个都是跨度，在td内有一个数字。 注意：某些Tds包含多个跨度，例如218和222。（您可以看到带有淡蓝色线条的tr。）

如您所见，它确实触及了一点，因为这是该列（包括标题）中最大的元素。 但是这种情况很少发生。 在所有情况下，我将如何拉伸使其触及。

您可以建议使用除跨度以外的其他方式，但是请注意，我在td中确实需要多个东西，因此无法应用于td。

到目前为止，控制大多数此类的CSS：

  table.Timetable td ,  table.Timetable th 
  {
      border-spacing: 0px;
      padding: 0px;
  }

  .bookingStart, .bookingMiddle, .bookingEnd
  {
      background-color: white;
      color: Black;
      border-top: 2px solid black;
        border-bottom: 2px solid black;
  }
  .bookingStart 
  {
      border-left: 2px solid black;
  }
    .bookingEnd
  {
      border-right: 2px solid black;
  }

哦，更可喜的是，我希望能够再次填充这些单元格，因为它们显然已经合并在一起了。

JSfiddle在这里： http : //jsfiddle.net/fp2Ak/

Answer 1

跨度必须浮动以便受宽度影响，因此您可以执行以下操作：

td span{float:left; width:100%; min-width:100%;}

或更准确地说，如果我正确理解了您的CSS：

.bookingStart, .bookingMiddle, .bookingEnd
{
  background-color: white;
  color: Black;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  float:left;
  width:100%;
  min-width:100%; /*some browsers like this better*/
}

Answer 2

您应该将边界放在td而不是跨度上。 这将使您还可以在td上添加一些填充，以使长数字看起来也不错。