У меня есть таблица, которую я действительно хочу иметь фиксированный заголовок и позволяю прокручивать строки в таблице, пока строка заголовка остается статической. Кроме того, я хочу, чтобы раздел тела таблицы занимал оставшуюся высоту в содержащем элементе, который остается после визуализации строки заголовка.
Пока у меня есть две таблицы, первая содержит thead, tr и множественный th, вторая содержит tbody с несколькими tr, каждый с несколькими td, например:
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
</tr>
</thead>
</table>
<div style="overflow:scroll">
<table>
<tbody>
<tr><td /><td /><td /><td /><td /></tr>
<tr><td /><td /><td /><td /><td /></tr>
</tbody>
</table>
</div>
Я провел некоторое исследование и обнаружил, что при настройке стиля в DIV он масштабируется до высоты содержащего его элемента
position:absolute;
height:auto;
top:0;
bottom:0;
Проблема состоит в том, что установка абсолютной позиции как для таблицы, содержащей заголовок, так и для таблицы, содержащей тело, устанавливает их для отображения в 0, 0 внутри содержащего элемента. Я мог бы указать значение пикселя для свойства top CSS, но это делает его более жестким.
Есть ли какое-то ключевое значение позиционирования CSS или комбинация, о которой я не думаю, что могло бы помочь мне достичь всего этого?