跨越td延伸跨度

Question

我认为图像最能说明这一点：JS FIDDLE HERE：http://jsfiddle.net/fp2Ak/

我想要做的是，这些线条实际触摸。每个都是一个带有数字的跨度。在td内。注意：某些Tds包含多个跨距，例如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;
  }

哦，并且最好能够再次填充细胞，因为它们已经合并在一起了。

JS在这里提问：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上添加一些填充，使长数看起来很好。