Итак, мне понадобилось разместить в ячейке одной таблицы другую таблицу так, чтобы высота вложенной таблицы всегда была по высоте равна высоте ячейки, в которой она находится. Ячейка таблицы может распираться по высоте как вложенным контентом, так и другими ячейками в той же строке. Необходимо, чтобы во втором случае вложенная таблица растягивалась до высоты родительской ячейки.
В FF для достижения нужного эффекта мне понадобилось прописать стиль height: 100% для вложенной таблицы и для самой ячейки, в Opera дополнительно потребовалось (зачем-то) прописать тот же стиль и для строки с ячейкой. Для IE7 (другой версии под рукой сейчас нет) не помогли никакие ухищрения.
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Тест</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
table { border: 1px solid blue; }
table td { border: 1px solid green; padding: 0px; }
</style>
</head>
<body>
<table>
<tr style="height: 100%;">
<td style="height: 100%;">
<table style="height: 100%;">
<tr>
<td>some text in a single line</td>
</tr>
</table>
</td>
<td>some long text in<br />2 lines of text</td>
</tr>
</table>
</body>
</html>
Есть идеи как победить злобный IE7?
P.S. Предлагать убрать ссылку на DTD и тем самым перевести браузер в Quirks Mode -- не надо, нужно решение в рамках валидной верстки.
Новости дизайна |
Галереи |
О проекте |
RSS
Правила |
FAQ |
Поиск |
Наша команда |
Регистрация |
Вход
