Một giải pháp CSS thuần túy thực tế với hàng tiêu đề cố định và cột đầu tiên
Tôi phải tạo một bảng với cả tiêu đề cố định và cột đầu tiên cố định bằng cách sử dụng CSS thuần túy và không có câu trả lời nào ở đây đúng như ý tôi.
Các position: stickybất động sản hỗ trợ cả gắn bó đầu trang (như tôi đã nhìn thấy nó được sử dụng nhiều nhất) và bên cạnh các phiên bản hiện đại của Chrome, Firefox, và Edge. Điều này có thể được kết hợp với một divcó thuộc overflow: scrolltính để cung cấp cho bạn một bảng với các tiêu đề cố định có thể được đặt ở bất kỳ đâu trên trang của bạn:
Đặt bàn của bạn trong một thùng chứa:
<div class="container">
<table></table>
</div>
Sử dụng overflow: scrolltrên vùng chứa của bạn để cho phép cuộn:
div.container {
overflow: scroll;
}
Như Dagmar đã chỉ ra trong các nhận xét, vùng chứa cũng yêu cầu a max-widthvà a max-height.
Sử dụng position: stickyđể có các tế bào bảng dính vào mép và top, righthoặc leftđể chọn cạnh để dính vào:
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
Như MarredCheese đã đề cập trong các nhận xét, nếu cột đầu tiên của bạn chứa <td>các phần tử thay vì<th> phần tử, bạn có thể sử dụng tbody td:first-childtrong CSS của mình thay vìtbody th
Để tiêu đề trong cột đầu tiên dính vào bên trái, hãy sử dụng:
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/
