Установка максимальной высоты для содержимого ячеек таблицы
У меня есть таблица, которая всегда должна занимать определенный процент от высоты экрана. Большинство строк имеют фиксированную высоту, но у меня есть одна строка, которая должна растягиваться, чтобы заполнить доступное пространство. В случае, если содержимое ячейки в этой строке превышает желаемую высоту, я хочу, чтобы содержимое было обрезано с помощью overflow: hidden.
К сожалению, таблицы и строки не соблюдают свойство max-height. (Это в спецификации W3C). Когда в ячейке слишком много текста, таблица становится выше, вместо того, чтобы придерживаться указанного процента.
Я могу заставить ячейку таблицы вести себя, если я укажу для нее фиксированную высоту в пикселях, но это противоречит цели о том, чтобы он автоматически растягивался, чтобы заполнить доступное пространство.
Я пробовал использовать div, но не могу найти волшебную формулу. Если я использую div с display: table,: table-row и: table-cell, они действуют как таблица.
Есть какие-нибудь подсказки о том, как я могу имитировать свойство max-height в таблице?
<head>
<style>
table {
width: 50%;
height: 50%;
border-spacing: 0;
}
td {
border: 1px solid black;
}
.headfoot {
height: 20px;
}
#content {
overflow: hidden;
}
</style>
</head>
<body>
<table>
<tr class="headfoot"><td>header</td></tr>
<tr>
<td>
<div id="content">
put lots of text here
</div>
</td>
<tr>
<tr class="headfoot"><td>footer</td></tr>
</table>
</body>