Чтобы сделать <tbody>элемент прокручиваемым, нам нужно изменить способ его отображения на странице, т.е. использовать его display: block;для отображения в качестве элемента уровня блока.
Так как мы изменяем displayсвойство tbody, мы должны изменить это свойство и для theadэлемента, чтобы не нарушать макет таблицы.
Итак, мы имеем:
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
Веб - браузеры отображают theadи tbodyэлементы в виде строки-группы ( table-header-groupи table-row-group) по умолчанию.
Как только мы изменим это, внутренние trэлементы не заполняют все пространство своего контейнера.
Чтобы это исправить, мы должны вычислить ширину tbodyстолбцов и применить соответствующее значение к theadстолбцам с помощью JavaScript.
Авто ширина столбцов
Вот версия jQuery вышеупомянутой логики:
// Change the selector if needed
var $table = $('table'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
И вот вывод (на Windows 7 Chrome 32) :
РАБОЧАЯ ДЕМО .
Таблица полной ширины, столбцы относительной ширины
Поскольку оригинальный плакат требовался, мы могли бы расширить tableдо 100% widthего контейнера, а затем использовать относительный ( процент ) widthдля каждого столбца таблицы.
table {
width: 100%; /* Optional */
}
tbody td, thead th {
width: 20%; /* Optional */
}
Поскольку таблица имеет (своего рода) разметку , мы должны отрегулировать ширину theadстолбцов при изменении размера контейнера.
Следовательно, мы должны установить ширину столбцов после изменения размера окна:
// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs
Выход будет:
РАБОЧАЯ ДЕМО .
Поддержка браузера и альтернативы
Я протестировал два вышеуказанных метода в Windows 7 через новые версии основных веб-браузеров (включая IE10 +), и это сработало.
Тем не менее, он не работает должным образом на IE9 и ниже.
Это связано с тем, что в макете таблицы все элементы должны иметь одинаковые структурные свойства.
Используя элементы display: block;for <thead>и <tbody>, мы нарушили структуру таблицы.
Редизайн макета с помощью JavaScript
Один из подходов заключается в перепроектировании (всей) компоновки таблицы. Использование JavaScript для создания нового макета на лету, обработки и / или динамической регулировки ширины / высоты ячеек.
Например, взгляните на следующие примеры:
Скворечники
Этот подход использует две вложенные таблицы с содержащим div. Первая tableимеет только одну ячейку, которая имеет div, а вторая таблица находится внутри этого divэлемента.
Проверьте таблицы вертикальной прокрутки в CSS Play .
Это работает в большинстве веб-браузеров. Мы также можем динамически выполнять вышеуказанную логику с помощью JavaScript.
Таблица с фиксированным заголовком на свитке
С целью добавления вертикальной полосы прокрутки к <tbody>отображающей таблицы заголовка в верхней части каждой строки, мы могли бы расположить на theadэлемент , чтобы остаться fixedв верхней части экрана вместо.
Вот рабочая демонстрация этого подхода в исполнении Жюльена .
Имеет многообещающую поддержку веб-браузера.
А вот чистый CSS реализация на Willem Van Bockstal .
Чистое решение CSS
Вот старый ответ. Конечно, я добавил новый метод и уточнил объявления CSS.
Стол с фиксированной шириной
В этом случае значение tableдолжно быть фиксированным width (включая сумму ширины столбцов и ширины вертикальной полосы прокрутки) .
Каждый столбец должен иметь конкретную ширину , и последний столбец из theadэлементов нуждается в большей ширины , которая равна к другим ширина + ширина вертикальной полосы прокрутки.
Следовательно, CSS будет:
table {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
}
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 140px;
}
thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
Вот вывод:
РАБОЧАЯ ДЕМО .
Стол со 100% шириной
В этом подходе tableширина имеет 100%для каждого thи tdзначение widthсвойства должно быть меньше, чем 100% / number of cols.
Кроме того , нам нужно , чтобы уменьшить ширину от , theadкак значения ширины вертикальной полосы прокрутки.
Для этого нам нужно использовать calc()функцию CSS3 следующим образом:
table {
width: 100%;
border-spacing: 0;
}
thead, tbody, tr, th, td { display: block; }
thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
tr:after { /* clearing float */
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 19%; /* 19% is less than (100% / 5 cols) = 20% */
float: left;
}
Вот онлайн демо .
Примечание. Этот подход потерпит неудачу, если содержимое каждого столбца разбивает строку, то есть содержимое каждой ячейки должно быть достаточно коротким .
Ниже приведены два простых примера чистого решения CSS, которые я создал, когда ответил на этот вопрос.
Вот демоверсия jsFiddle v2 .
Старая версия: jsFiddle Demo v1
