Реальное решение на чистом CSS с фиксированной строкой заголовка и первым столбцом
Мне пришлось создать таблицу с фиксированным заголовком и фиксированным первым столбцом, используя чистый CSS, и ни один из ответов здесь не был тем, что я хотел.
position: stickyСвойство поддерживает как прилипание к вершине (как я видел , как это используется самый) и в сторону в современных версиях Chrome, Firefox, и Edge. Это может быть объединено с , divкоторый имеет overflow: scrollсвойство , чтобы дать вам таблицу с фиксированными заголовками , которые могут быть размещены в любом месте на странице:
Поместите свой стол в контейнер:
<div class="container">
<table></table>
</div>
Используйте overflow: scrollна своем контейнере для включения прокрутки:
div.container {
overflow: scroll;
}
Как указала Дагмар в комментариях, контейнер также требует a 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/
