2 одинаковых куска простого HTML-кода, один помещаем в ячейку таблицы и законы HTML разметки для него перестают работать.
Не могу понять причину.
Пробовал в последних FireFox и Chrome.
Пример:
http://xexsus.com/misc/example.html
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/></head>
<body>
<!-- кусок кода, НАЧАЛО -->
<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;">
1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
</div>
<br/>
</div>
</div>
</div>
<!-- кусок кода, КОНЕЦ -->
<br/><br/>
<!-- Теперь тоже самое, но в ячейке таблицы. Браузер рисует совсем другую картину -->
<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;">
1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
</div>
<br/>
</div>
</div>
</div>
<!-- кусок кода, КОНЕЦ -->
</td>
</tr>
</table>
</body>
</html>
Примечание:
Проблема решена. Волшебные слова: table-layout: fixed;
Примечание:
2Yura Pozdnyakov:
Размеры таблицы указанны width="100%", и следовательно таблица должна принять размер равный 100% родительского элемента. А div внутри должен быть 60% от размеров таблицы.
К чему нужно было правило при котором игнорируются "явно установленные размеры таблицы", и таблица растягивается по размеру содержимого? Другое дело, если размеры таблицы не указаны (width="auto"), то таблица растягивается по размеру содержимого. Вот это будет логично и красиво.
По видимому разработчики стандартов осознали свою ошибку введя исправление в виде "table-layout: fixed".
RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.
Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.
Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.