Растянуть пролет через тд - PullRequest
Новая
       9

Растянуть пролет через тд

2 голосов
/ 29 ноября 2011

Я думаю, что изображение лучше всего описывает это: JS FIDDLE ЗДЕСЬ: http://jsfiddle.net/fp2Ak/

enter image description here

Что я хочу сделать, так это чтобы эти строки действительно касались. Каждый из них представляет собой промежуток с номером в. В течение тд. Примечание: некоторые Tds содержат несколько интервалов, например, 218 и 222. (вы можете увидеть tr со слабыми синими линиями.)

Как вы можете видеть, он касается одной точки, так как это самый большой элемент в столбце (включая заголовок). Но это редко так. Как бы я растянул его на ощупь во ВСЕХ случаях?

Вы можете предложить использовать что-то отличное от span, но учтите, что мне нужно больше, чем одна вещь в тд, и, следовательно, не может быть применено к тд.

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/

Ответы [ 2 ]

3 голосов
/ 29 ноября 2011

промежутки должны быть плавающими, чтобы зависеть от ширины, чтобы вы могли сделать что-то вроде: 

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*/
}
2 голосов
/ 29 ноября 2011

Вы должны поставить свои границы на тд, а не пролеты. Это позволит вам также добавить некоторые отступы к тд, чтобы даже длинные цифры выглядели хорошо.

...