转载https://www.cnblogs.com/nanfei/p/16319915.html
略有修改
.table-fixedHeader {
max-height: 60vh;
overflow-y: auto;
overflow-x: hidden;
display: block;
width: 100%;
table-layout: fixed;
--vetialBorder: 1px;
}
.table-fixedHeader thead {
border-left: 1px solid #DFE2EB;
border-top: 1px solid #DFE2EB;
position: sticky;
top: 0;
left: 0;
right: 0;
display: table;
width: 100%;
table-layout: fixed;
}
.table-fixedHeader thead tr {
height: 40px;
line-height: 40px;
}
.table-fixedHeader thead tr>th {
background-color: #fafafa;
font-weight: bold;
border-bottom: 1px solid #DFE2EB;
border-right: var(--vetialBorder) solid #DFE2EB;
color: #909399;
text-align: center;
min-width: 40px;
}
.table-fixedHeader tbody {
border-left: 1px solid #DFE2EB;
display: table;
width: 100%;
table-layout: fixed;
}
.table-fixedHeader tbody tr {
height: 40px;
line-height: 40px;
}
.table-fixedHeader tbody tr td {
border-bottom: 1px solid #DFE2EB;
border-right: var(--vetialBorder) solid #DFE2EB;
text-align: center;
}
<div class="container-fluid goods_table table-responsive">
<table class="table table-hover table-fixedHeader">
<thead>
<tr>
<th class="hidden-xs" width="36px">
<input type="checkbox" id="checkAll" />
</th>
<th width="100px">序号</th>
<th width="300px">商品名</th>
<th>分类</th>
<th>状态</th>
<th>规格</th>
<th width="120px">数量</th>
<th>价格</th>
<th>过期日期</th>
<th>sku</th>
<th>69码</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hidden-xs" width="36px">
<input type="checkbox" name="chkItem" value="9865" />
</td>
<td width="100px">9865</td>
<td width="300px">买不起卖不起买不起卖不起56555ml超级热销产品</td>
<td>无敌分类</td>
<td style="color: red;">下架</td>
<td>超级袋装</td>
<td width="120px">665</td>
<td>¥999.99</td>
<td>2323-02-10 15:11</td>
<td>65889944112235555</td>
<td>695789454115</td>
</tr>
</tbody>
</table>
</div>