Rzeczywiste rozwiązanie CSS ze stałym wierszem nagłówka i pierwszą kolumną
Musiałem utworzyć tabelę ze stałym nagłówkiem i ustaloną pierwszą kolumną przy użyciu czystego CSS i żadna z odpowiedzi nie była tym, czego chciałem.
position: stickyNieruchomość obsługuje zarówno przyklejaniu do góry (jak widziałem kiedyś najbardziej) i na bok w nowoczesnych wersjach Chrome, Firefox i Edge. Można to połączyć z divrozszerzeniem, które maoverflow: scroll właściwość, aby utworzyć tabelę ze stałymi nagłówkami, które można umieścić w dowolnym miejscu na stronie:
Umieść swój stół w pojemniku:
<div class="container">
<table></table>
</div>
Użyj overflow: scrollna swoim kontenerze, aby włączyć przewijanie:
div.container {
overflow: scroll;
}
Jak zauważyła Dagmar w komentarzach, kontener wymaga również a max-widthi a max-height.
Użyj position: stickymieć komórki tabeli trzymać się krawędzi i top, rightlub leftdo wyboru która krawędź trzymać się:
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
Jak wspomniała MarredCheese w komentarzach, jeśli pierwsza kolumna zawiera <td>elementy zamiast <th>elementów, możesz użyć tbody td:first-childw swoim CSS zamiasttbody th
Aby nagłówek w pierwszej kolumnie znajdował się po lewej stronie, użyj:
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/
