表格表头列固定 position:sticky

<div class="table-wrapper">

<table class="fixed-table">

<thead>

<tr>

<th>表头1</th>

<th>表头2</th>

<th>表头3</th>

<th>表头4</th>

<th>表头5</th>

<th>表头6</th>

</tr>

</thead>

<tbody>

<tr>

<td>内容1</td>

<td>内容2</td>

<td>内容3</td>

<td>内容4</td>

<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit odio reprehenderit, vero ut temporibus

excepturi voluptatibus maxime! Aliquam, voluptatibus quam aspernatur assumenda enim minus, obcaecati, ipsa

temporibus provident adipisci sint.</td>

<td>内容6</td>

</tr>

</tbody>

</table>

</div>



.table-wrapper {

max-height: 500px;

overflow: auto;

border: 1px solid #ccc;

}


.table-wrapper .fixed-table {

border-collapse: collapse;

table-layout: fixed;

}


.table-wrapper .fixed-table th, .table-wrapper .fixed-table td {

text-align: center;

font-size: 12px;

color: #666;

padding: 20px;

position: relative;

white-space: nowrap;

background: #fff;

}


.table-wrapper .fixed-table th:after, .table-wrapper .fixed-table td:after {

content: '';

display: block;

width: 1px;

height: 100%;

background-color: #cccccc;

position: absolute;

right: 0;

top: 0;

}


.table-wrapper .fixed-table th:before, .table-wrapper .fixed-table td:before {

content: '';

display: block;

width: 100%;

height: 1px;

background-color: #cccccc;

position: absolute;

left: 0;

bottom: 0;

}


.table-wrapper .fixed-table th {

position: -webkit-sticky;

position: sticky;

top: 0;

z-index: 3;

background-color: #eeeeee;

font-weight: bold;

}


.table-wrapper .fixed-table th:first-child {

position: -webkit-sticky;

position: sticky;

left: 0;

top: 0;

z-index: 4;

}


.table-wrapper .fixed-table td:first-child {

position: -webkit-sticky;

position: sticky;

left: 0;

z-index: 3;

}