Фактичне рішення CSS із фіксованим рядком заголовка та першим стовпцем
Мені довелося створити таблицю як з фіксованим заголовком, так і з фіксованим першим стовпцем, використовуючи чистий CSS, і жодна з відповідей тут була зовсім не такою, яку я хотів.
position: stickyВластивість підтримує як прилипання до вершини (як я бачив , як це використовується самий) і в бік в сучасних версіях Chrome, Firefox, і Edge. Це можна поєднати з тим, divщо маєoverflow: scroll властивість давати вам таблицю з фіксованими заголовками, які можна розмістити де завгодно на вашій сторінці:
Помістіть свій стіл у контейнер:
<div class="container">
<table></table>
</div>
Використовуйте overflow: scrollна своєму контейнері, щоб увімкнути прокрутку:
div.container {
overflow: scroll;
}
Як в коментарях зазначив Дагмар , контейнеру також потрібні а max-widthі а max-height.
Використовуйте , position: stickyщоб осередки таблиць прилипають до краю і top, rightабо , leftщоб вибрати , який край дотримуватися:
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
Як зазначав MarredCheese у коментарях, якщо ваш перший стовпець містить <td>елементи замість <th>елементів, ви можете використовувати tbody td:first-childу своєму CSS замістьtbody th
Щоб заголовок у першій колонці прилипав ліворуч, використовуйте:
thead th:first-child {
left: 0;
z-index: 1;
}
/* Use overflow:scroll on your container to enable scrolling: */
div {
max-width: 400px;
max-height: 150px;
overflow: scroll;
}
/* Use position: sticky to have it stick to the edge
* and top, right, or left to choose which edge to stick to: */
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
/* To have the header in the first column stick to the left: */
thead th:first-child {
left: 0;
z-index: 2;
}
/* Just to display it nicely: */
thead th {
background: #000;
color: #FFF;
/* Ensure this stays above the emulated border right in tbody th {}: */
z-index: 1;
}
tbody th {
background: #FFF;
border-right: 1px solid #CCC;
/* Browsers tend to drop borders on sticky elements, so we emulate the border-right using a box-shadow to ensure it stays: */
box-shadow: 1px 0 0 0 #ccc;
}
table {
border-collapse: collapse;
}
td,
th {
padding: 0.5em;
}
<div>
<table>
<thead>
<tr>
<th></th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
</tr>
</thead>
<tbody>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/qwubvg9m/1/
