Неверная ширина столбца - PullRequest
Новая
       17

Неверная ширина столбца

1 голос
/ 30 января 2012

У меня есть таблица с 3 столбцами, где третий столбец больше на 6, чем остальные столбцы.
Вот мой пример.
Почему третий столбец имеет тот же размер, что идругой?

Обновление:
Я добавил еще один пример, в котором макет таблицы фиксирован и ширина в порядке.
Вот оно.
Любоеидея почему?

Мне нужен заголовок с colspan, но это создает проблему.Мне также нужно исправить таблицу как исправлено.Есть идеи, как это обойти?

Проблема возникает как в IE8, так и в Firefox.

Обновление:
Я следовал совету @Alex Hadley, но это вызывает другие проблемы.
Не знаю, почему длинная клетка не спрятана: http://jsfiddle.net/9vcC2/32/

Ответы [ 4 ]

2 голосов
/ 30 января 2012

из-за table-layout: fixed;.Проверьте это после удаления из css.

Как сказал Муртаза: это исправлено.Ваша таблица игнорирует ширину, заданную для отдельного td, и использует собственную вычисленную ширину в соответствии с фиксированным стилем

2 голосов
/ 30 января 2012

Тиз абсолютно верно, что проблема с table-layout:fixed.

Что делает этот стиль, так это заставляет таблицу брать ширину столбцов из встречающейся строки first , а затем начинает генерировать содержимое, основываясь исключительно на этом.Итак, в вашем примере первая строка - colspan=3, поэтому она дает всем столбцам одинаковую ширину.Попробуйте поменять строки в первом примере, чтобы увидеть эффект.Это также объясняет, почему ваш второй пример работает.

Более подробную информацию можно увидеть здесь: http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout

В алгоритме с фиксированным макетом таблицы ширина каждого столбца определяется какследует:

  1. Элемент столбца со значением, отличным от 'auto', для свойства 'width' устанавливает ширину для этого столбца.
  2. В противном случае ячейка в первой строке сзначение, отличное от 'auto' для свойства 'width', определяет ширину этого столбца. Если ячейка охватывает более одного столбца, ширина делится на столбцы .
  3. Любые оставшиеся столбцы в равной степени разделяют оставшееся горизонтальное табличное пространство (минус границы или интервал между ячейками).

[мой жирный шрифт]

В качестве решения вы можете добавить <colgroup> в качестве первой записи внутри тега <table>: 

<colgroup> 
    <col style="width:50px;" /> 
    <col style="width:50px;" /> 
    <col style="width:300px;" /> 
</colgroup>

например.Как видно здесь .

0 голосов
/ 31 января 2012

Как отмечает @AlexHadley, проблема вызвана несколькими td строками в вашем thead, что потребует использования colgroups для поддержки макета.

Однако, так какможет показаться, что начальное значение tr в thead фактически используется для предоставления описания таблицы, возможно, было бы более семантическим использовать тег caption для назначения определения таблице.

В заметке о разметке вы также должны использовать th вместо td для строк в заголовке таблицы.

Для получения дополнительной информации о том, что доступно в разметке table, проверьте это эта ссылка на WDG .

0 голосов
/ 30 января 2012

Это потому, что colspan td сначала устанавливает ширину.Это работает, если вы объявляете ширину перед colspan: 

<thead>
  <tr>
     <td style="width:50px;">FirstName</td>
     <td style="width:50px;">LastName</td>
     <td style="width:300px;">Address</td>
  </tr>
  <tr>
     <td colspan="3">text</td>
  </tr>
</thead>

Вы можете использовать невидимую строку для ширины: 

<thead>
  <tr style="height:0px;">
     <td style="width:50px;"></td>
     <td style="width:50px;"></td>
     <td style="width:300px;"></td>
  </tr>
  <tr>
     <td colspan="3">text</td>
  </tr>
  <tr>
     <td>FirstName</td>
     <td>LastName</td>
     <td>Address</td>
  </tr>
</thead>
...