html - style - Estirar un tramo en un td

tr style

Question

Creo que una imagen lo describe mejor: JS FIDDLE AQUÍ: http://jsfiddle.net/fp2Ak/

Lo que quiero hacer es que esas líneas realmente toquen. Cada uno es un lapso con un número en. Dentro de un td. Nota: algunos Tds contienen tramos múltiples, por ejemplo, 218 y 222. (puede ver tr con líneas azules tenues).

Como puede ver, toca en un punto, ya que este es el elemento más grande en la columna (incluido el encabezado). Pero esto rara vez es el caso. ¿Cómo lo estiraría para tocar en TODOS los casos?

Puedes sugerir usar algo distinto a span, pero ten en cuenta que necesito más de una cosa en un td, y por lo tanto no puedo aplicarlo a td.

El CSS que rige la mayor parte de esto hasta el momento:

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

Ah, y preferible, me gustaría poder rellenar las celdas nuevamente, ya que claramente se han fusionado.

JSfiddle aquí: http://jsfiddle.net/fp2Ak/

Answer 1

Debes poner tus bordes en el td no en los tramos. Esto le permitirá también poner algo de relleno en la td para que incluso los números largos se vean bien.

Answer 2

los tramos deben flotar para verse afectados por el ancho, por lo que podrías hacer algo como:

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

o más exactamente si entiendo tu CSS correctamente:

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