在 td 上拉伸跨度

Question

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

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

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

您可以建议使用 span 以外的其他东西，但请注意，我在 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;
  }

哦，我希望能够再次填充单元格，因为 th 显然已经合并在一起了。

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 上添加一些填充，以使长数字看起来也不错。