Sabit bir başlık satırı ve ilk sütuna sahip gerçek bir saf CSS çözümü
Saf CSS kullanarak hem sabit bir başlık hem de sabit bir ilk sütun içeren bir tablo oluşturmak zorunda kaldım ve buradaki yanıtların hiçbiri istediğim gibi değildi.
position: stickyMülkiyet (Ben en çok kullanılan gördüğümüz gibi) ve Chrome, Firefox ve Kenar modern sürümlerinde tarafına üstüne hem yapışmasını desteklemektedir. Bu, sayfanızın herhangi bir yerine yerleştirilebilecek sabit başlıklara sahip bir tablo verme özelliğine divsahip olan bir ile birleştirilebilir overflow: scroll:
Masanızı bir kaba yerleştirin:
<div class="container">
<table></table>
</div>
overflow: scrollKaydırmayı etkinleştirmek için kapsayıcınızda kullanın :
div.container {
overflow: scroll;
}
As Dagmar Açıklamalarda belirttiği, konteyner ayrıca gerektirir max-widthve max-height.
Kullanım position: stickykenarına tablo hücrelerini olması sopa ve top, rightveya leftsopa hangi kenar seçmek için:
thead th {
position: -webkit-sticky;
position: sticky;
top: 0;
}
tbody th {
position: -webkit-sticky;
position: sticky;
left: 0;
}
As MarredCheese yorum olarak bahsedilen ilk sütun içeriyorsa, <td>yerine unsurları <th>unsurları kullanabilirsiniz tbody td:first-childCSS'nizde yerinetbody th
İlk sütundaki başlığın solda kalması için şunu kullanın:
thead th:first-child {
left: 0;
z-index: 1;
}
div {
max-width: 400px;
max-height: 150px;
overflow: scroll;
}
thead th {
position: -webkit-sticky;
position: sticky;
top: 0;
}
tbody th {
position: -webkit-sticky;
position: sticky;
left: 0;
}
thead th:first-child {
left: 0;
z-index: 2;
}
thead th {
background: #000;
color: #FFF;
z-index: 1;
}
tbody th {
background: #FFF;
border-right: 1px solid #CCC;
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/
