Solusi CSS murni aktual dengan baris tajuk tetap dan kolom pertama
Saya harus membuat tabel dengan header tetap dan kolom pertama tetap menggunakan CSS murni dan tidak ada jawaban di sini yang sesuai dengan yang saya inginkan.
The position: stickyproperti mendukung kedua mencuat ke atas (seperti yang telah saya melihatnya digunakan paling) dan ke sisi dalam versi modern dari Chrome, Firefox, dan Edge. Ini dapat dikombinasikan dengan divyang memiliki overflow: scrollproperti untuk memberi Anda tabel dengan header tetap yang dapat ditempatkan di mana saja di halaman Anda:
Tempatkan meja Anda dalam wadah:
<div class="container">
<table></table>
</div>
Gunakan overflow: scrolldi penampung Anda untuk mengaktifkan pengguliran:
div.container {
overflow: scroll;
}
Seperti yang ditunjukkan Dagmar di komentarnya, container juga membutuhkan a max-widthdan a max-height.
Gunakan position: stickyuntuk memiliki sel tabel tongkat ke tepi dan top, right, atau leftuntuk memilih tepi untuk menempel:
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
Seperti yang disebutkan MarredCheese di komentar, jika kolom pertama Anda berisi <td>elemen, bukan <th>elemen, Anda dapat menggunakan tbody td:first-childdi CSS daripadatbody th
Agar tajuk di kolom pertama menempel di kiri, gunakan:
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/
