таблица-макет: исправленная проблема с шириной столбца

Мы используем свойство CSS table-layout: fixed для нашего мобильного приложения. (Я не помню всю причину, но я полагаю, что это связано с возможностью переноса некоторых слов) ...таблица-макет: исправленная проблема с шириной столбца

У меня возникла проблема, когда нам нужно определить один из двух столбцов две таблицы столбцов. Не очень важно, обычно мы делаем это:

<table> 
    <tbody>   
    <tr> 
     <th width="20%">hello world</th> 
     <td>hello world</td> 
    </tr> 
    </tbody> 
</table>

Это работает нормально.

Однако, если нам нужно создать строку, которая охватывает обе колонки перед этим:

<table> 
    <tbody> 
    <tr> 
     <td colspan="2">hello world</th> 
    </tr>  
    <tr> 
     <th width="20%">hello world</th> 
     <td>hello world</td> 
    </tr> 
    </tbody> 
</table>

Что происходит, по крайней мере, в Chrome, является то, что две колонки привязываются к 50% ширины. У меня есть образец jsbin здесь:

http://jsbin.com/ejovut/3

Является ли это нормальное поведение? Ошибка Chrome? Способ обойти эту проблему?

источник

2012-04-13 DA.

Это не ошибка. table-layout:fixed означает, что браузеру разрешено оптимизировать вычисления табличной компоновки, предполагая, что имеют значение только значения для первой строки и столбца. В частности, NOT необходимо проверить и выполнить вычисления компоновки на более позднем содержимом таблицы, что может существенно повлиять на производительность макета.

Правильным решением является использование элементов <col> и <colgroup>, чтобы явно указать ширину столбцов, а не использовать первую строку.

источник

2012-10-11 13:13:05

Извините, что он плотный, но является решением для * not * use table-layout: fixed? or to использовать col и colgroup в дополнение к table-layout: исправлено, если эта фиксированная «перенос слов»? (TBH Я не знаю, почему таблица-макет будет использоваться вообще в этом примере, и просто ее удаление решит проблему? – MrWhite

' table-layout: fixed' может потребоваться для разрыва длинных слов (см. http://jsbin.com/utifiy/2/edit). В общем, если вам нужен точный контроль макета, значение 'fixed' дает вам это, тогда как default делает больше магии: но вам нужно заменить магический размер h * something * - поэтому вам нужно либо явно изменить спецификации элемента ** first row ** или 'col'. Проблема OP заключалась в том, что если в первой строке есть ячейки, которые охватывают столбцы, вы * не можете объявить размер столбцов в ячейках, поэтому решение должно использовать калибровку на основе 'col'. –

-1

первая строка таблицы должна содержать все также, ошибки Chrome не позволяют использовать для этого.

источник

2012-04-30 11:10:04 4esn0k

содержит все, что? –

– 4esn0k

Итак, это известная ошибка Chrome, и обходной путь заключается в том, чтобы убедиться, что есть пустая первая строка, содержащая каждый отдельный TD? –

таблица-макет: исправленная проблема с шириной столбца

ответ

Смежные вопросы