Что вам нужно, это:
1) имеет тело таблицы ограниченной высоты , поскольку прокрутка происходит только тогда, когда содержимое больше окна прокрутки. Однако размер tbody не может быть измерен, и вы должны отобразить его как block, чтобы сделать это:
tbody {
overflow-y: auto;
display: block;
max-height: 10em; // For example
}
2) Повторная синхронизация заголовков таблицы и ширины столбцов тела таблицы , поскольку создание последнего * block сделало его несвязанным элементом. Единственный способ сделать это - симулировать синхронизацию с помощью , обеспечивающей одинаковую ширину столбцов для обоих .
Однако, поскольку tbody сам по себе является block, он больше не может вести себя как table. Поскольку вам все еще нужно поведение table для правильного отображения столбцов, решение состоит в том, чтобы запросить отображение каждой из ваших строк как отдельных table s:
thead {
display: table;
width: 100%; // Fill the containing table
}
tbody tr {
display: table;
width: 100%; // Fill the containing table
}
(Обратите внимание, что, используя эту технику, вы больше не сможете охватывать строки).
Как только это будет сделано, вы можете принудительно установить одинаковую ширину столбцов в thead и tbody. Вы не могли этого:
- индивидуально для каждого столбца (с помощью определенных классов CSS или встроенного стиля), что довольно утомительно для каждого экземпляра таблицы;
- единообразно для всех столбцов (например,
th, td { width: 20%; }, если у вас есть 5 столбцов), что более практично (не нужно устанавливать ширину для каждого экземпляра таблицы), но не может работать для любого количества столбцов
- единообразно для любых столбцов через фиксированную разметку таблицы.
Я предпочитаю последний вариант, который требует добавления:
thead {
table-layout: fixed; // Same layout for all cells
}
tbody tr {
table-layout: fixed; // Same layout for all cells
}
th, td {
width: auto; // Same width for all cells, if table has fixed layout
}
См. Демо здесь , разветвленный от ответа на на этот вопрос .