Для того, щоб зробити <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;для елементів <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 Demo v2 .
Стара версія: jsFiddle Demo v1
