Создание таблицы с фиксированным заголовком и прокручиваемым телом

Часто встречается ситуация, когда необходимо создать таблицу с фиксированным заголовком и прокручиваемым телом. Это особенно актуально для больших таблиц, данные в которых должны прокручиваться, а заголовок оставаться на месте для удобства чтения и навигации.

Возможно, были попытки использовать CSS-свойства height и overflow для элемента tbody, чтобы ограничить его высоту и включить прокрутку. Но эти свойства не всегда работают, как ожидается, особенно в сочетании с Bootstrap.

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody style="height: 200px; overflow: auto;">
    <!-- Тут много строк -->
    </tbody>
</table>

Существует несколько способов решения этой задачи.

Использование display: block

Один из способов — это использование CSS-свойства display: block для элемента tbody. Это превратит tbody в блочный элемент, что позволит применить к нему height и overflow.

tbody {
    display: block;
    height: 200px;
    overflow: auto;
}

Однако, это может вызвать проблемы с шириной ячеек, так как thead и tbody будут блочными элементами и не будут синхронизировать ширину ячеек.

Использование двух таблиц

Другой подход состоит в использовании двух разных таблиц: одной для заголовка и другой для тела.

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
</table>

<div style="height: 200px; overflow: auto;">
    <table class="table table-striped">
        <tbody>
        <!-- Тут много строк -->
        </tbody>
    </table>
</div>

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

Использование JavaScript

Еще один вариант — использование JavaScript или jQuery для синхронизации ширины ячеек заголовка и тела таблицы. Это может быть более сложным решением, но оно позволяет сохранить таблицу в одном элементе и избежать проблем с выравниванием.

В зависимости от конкретных требований и условий, может потребоваться использовать один из этих подходов или их комбинацию.