Stretch a span across a td

问题

I think an image best describes this: JS FIDDLE HERE: http://jsfiddle.net/fp2Ak/

What I want to do, is for those lines to actually touch. Each one is a span with a number in. within a td. Note: some Tds contain multiple spans, for example, 218 and 222. (you can see tr with faint blue lines.)

As you can see it does touch at one point, as this is the biggest element in the column (including header). But this is rarely the case. How would I stretch it to touch in ALL Cases.

You can suggest using someting other than span, but please note that I do need more than one thing in a td, and hence cant be applied to the td.

The CSS that governs most of this so far:

  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;
  }

Oh and preferabblly Id like to be able to pad the cells again, as the th clearly have been merged together.

JSfiddle of it here: http://jsfiddle.net/fp2Ak/

回答1:

spans have to be floated in order to be affected by width, so you could do something like:

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

or more accurately if I am understanding your css properly:

.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*/
}

回答2:

Your should put your borders on the td's not the spans. This will allow you to also put some padding on the td's to make even the long numbers look good.

来源：https://stackoverflow.com/questions/8311511/stretch-a-span-across-a-td