Рассмотрим эту простую таблицу HTML:
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<table style="border-collapse: collapse; table-layout: fixed; width: 280px;">
<tr>
<td style="padding: 5px; width: 50px; border: 0; word-wrap: break-word;">a</td>
<td style="padding: 5px; width: 100px; border: 0; word-wrap: break-word;">b</td>
<td style="padding: 5px; width: 100px; border: 0; word-wrap: break-word;">c</td>
</tr>
</table>
</body>
</html>
Это правильно отображается в любом крупном браузере, кроме Chrome, в котором ширины столбцов причудливо выглядят как 46px, 102px и 102px соответственно.
Если я возьму декларацию ширины CSS из элемента таблицы, то она правильно отображается в Chrome.Но мне нужно это там, иначе перенос слов не будет работать правильно.
Есть идеи, почему это не работает?Я пробовал разные типы документов, и это ничего не изменило, поэтому я предполагаю, что это не проблема таблицы HTML5.
РЕДАКТИРОВАТЬ: Получается, что если вы укажете table-layout: fixed и ширина пикселя для элемента table и ширина пикселя для каждого столбца, тогда Chrome будет считать, что ширина столбца включает отступы.Это противоречит блочной модели W3C и нарушает требуемое поведение CSS2.
Если вы не укажете table-layout: fixed или не определите ширину пикселя в элементе table, то Chrome будет корректно работатьПредположим, что ширина столбца, которую вы указываете исключить заполнение.Все остальные браузеры предполагают, что ширина столбцов исключает заполнение .
В приведенном выше примере указание ширины 60px, 110px и 110px устранило бы проблему в Chrome, но затем разбило бы ее во всех остальных.браузер.Значения 46px, 102px и 102px получены из Chrome, равномерно распределяющего столбцы с соотношением 40:90:90 вместо 50: 100: 100.