Почему меняются правила HTML разметки, если поместить код в ячейку таблицы?

[xexsus]

2 одинаковых куска простого HTML-кода, один помещаем в ячейку таблицы и он начинает криво показываться.

Не могу понять причину.

Пробовал в последних FireFox и Chrome.

Маленький пример: http://xexsus.com/misc/example.html

Доктайп: XHTML 1.0 Strict

Кусок кода:

<!-- кусок кода, НАЧАЛО -->
<div style="width:60%;">

<div style="width:100%; background-color:#FFF242;">
<div style="overflow:hidden;width:100%; background-color:#70FF38;">
<br/>

<div style="background-color:#FF075A;">
12345678901234567890123456789012345678901234567890123456789012345678901234567890
123456789012345678901234567890123456789012345678901234567890123456789012345678901
234567890123456789012345678901234567890123456789012345678901234567890123456789012
345678901234567890123456789012345678901234567890123456789012345678901234567890123
456789012345678901234567890123456789012345678901234567890123456789012345678901234
567890123456789012345678901234567890123456789012345678901234567890123456789012345
67890123456789012345678901234567890123456789012345678901234567890
</div>

<br/>
</div>
</div>

</div>
<!-- кусок кода, КОНЕЦ -->

Тоже самое, но в ячейке таблицы:

<table border="1" cellspacing="0" cellpadding="0" width="100%">
<tr>
 <td>

<!-- кусок кода, НАЧАЛО -->
<div style="width:60%;">

<div style="width:100%; background-color:#FFF242;">
<div style="overflow:hidden;width:100%; background-color:#70FF38;">
<br/>

<div style="background-color:#FF075A;">
12345678901234567890123456789012345678901234567890123456789012345678901234567890
123456789012345678901234567890123456789012345678901234567890123456789012345678901
234567890123456789012345678901234567890123456789012345678901234567890123456789012
345678901234567890123456789012345678901234567890123456789012345678901234567890123
456789012345678901234567890123456789012345678901234567890123456789012345678901234
567890123456789012345678901234567890123456789012345678901234567890123456789012345
67890123456789012345678901234567890123456789012345678901234567890
</div>

<br/>
</div>
</div>

</div>
<!-- кусок кода, КОНЕЦ -->

</td>
</tr>
</table>

Браузер рисует совсем другую картину.

По идее должна быть табличка в 100%, а внутри такой же блок, как и без таблицы.

Но табличка ползёт далеко за горизонт

[SelenIT]

А что в маленьком примере с кодировкой? И что за символы перед доктайпом - BOM-метка?

[xexsus]

Угу BOM-метка. Кодировка UTF8.

Хостинг принудительно посылает "Content-Type text/html; charset=windows-1251", наверное где то отключить можно. С BOM-меткой хоть в Chrome открывается правильно.

Жалко проблема не в этом, в любой кодировке одно и тоже показывает

Edited April 27, 2010 by xexsus

[mishka]

Попробуй табличке добавить style="table-layout: fixed;"

что-то у меня никто никуда не уполз... или я неправильно понял?

Edited April 27, 2010 by mishka2

[xexsus]

Отлично! Работает! Спасибо

[SelenIT]

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

Table-layout: fixed; эту зависимость от ширины контента убирает.