я есть таблица, которую я действительно хочу иметь фиксированный заголовок и позволяю прокручивать строки в таблице, пока строка заголовка остается статической. Кроме того, я хочу, чтобы раздел body таблицы занимал оставшуюся высоту в содержащем элементе, который остается после визуализации строки заголовка.

Пока у меня есть две таблицы, первая содержит 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 или комбинация, о которой я не думаю, что могло бы помочь мне достичь всего этого?