超简单纯css固定表头
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>table fix thead</title>
<style type="text/css">
.data-table {
margin-top: 58px;
margin-left: 350px;
width: 1520px;
height: 710px;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #DFDFDF;
border-spacing: 0px;
}
.data-thead {
height: 60px;
background: rgba(51,102,255,0.1);
border-radius: 8px 8px 0px 0px;
border: 1px solid #DFDFDF;
display: table;
table-layout: fixed;
}
.data-thead-td {
text-align: center;
width: 135px;
font-size: 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 28px;
border-bottom: 1px solid #DFDFDF;
}
.data-tbody {
height: 650px;
display: block;
overflow-y: auto;
overflow-x: hidden;
}
/* 隐藏滚动条*************************************************** */
.data-tbody::-webkit-scrollbar { width: 0 !important } /*chrome Safari*/
.data-tbody { -ms-overflow-style: none; } /*IE 10+*/
.data-tbody { overflow: -moz-scrollbars-none; } /*Firefox*/
/* *********************************************************** */
.data-tbody-td {
text-align: center;
width: 135px;
height: 58px;
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 58px;
border-bottom: 1px solid #DFDFDF;
}
.icon-box-in-table {
display: flex;
justify-content: center;
align-items: center;
}
.icon-in-table {
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<table class="data-table">
<thead class="data-thead">
<tr>
<td class="data-thead-td" style="width:265px;padding-left: 10px;text-align: left;">Invoice ID</td>
<td class="data-thead-td">Month</td>
<td class="data-thead-td">Company</td>
<td class="data-thead-td">Account</td>
<td class="data-thead-td">Payment</td>
<td class="data-thead-td">Auction</td>
<td class="data-thead-td">Confirm</td>
<td class="data-thead-td">Send</td>
<td class="data-thead-td">DueDate</td>
<td class="data-thead-td">Credit</td>
<td class="data-thead-td">Paid</td>
<td class="data-thead-td">PayDate</td>
</tr>
</thead>
<tbody class="data-tbody">
<tr>
<td class="data-tbody-td" style="width:265px;padding-left: 10px;text-align: left;">FUN-2022-11-1015-168</td>
<td class="data-tbody-td">2022-11</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">smartyads</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
</tr>
<tr>
<td class="data-tbody-td" style="width:265px;padding-left: 10px;text-align: left;">FUN-2022-11-1015-168</td>
<td class="data-tbody-td">2022-11</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">smartyads</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
</tr>
<tr>
<td class="data-tbody-td" style="width:265px;padding-left: 10px;text-align: left;">FUN-2022-11-1015-168</td>
<td class="data-tbody-td">2022-11</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">smartyads</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
</tr>
<tr>
<td class="data-tbody-td" style="width:265px;padding-left: 10px;text-align: left;">FUN-2022-11-1015-168</td>
<td class="data-tbody-td">2022-11</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">smartyads</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
</tr>
<tr>
<td class="data-tbody-td" style="width:265px;padding-left: 10px;text-align: left;">FUN-2022-11-1015-168</td>
<td class="data-tbody-td">2022-11</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">smartyads</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
</tr>
<tr>
<td class="data-tbody-td" style="width:265px;padding-left: 10px;text-align: left;">FUN-2022-11-1015-168</td>
<td class="data-tbody-td">2022-11</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">smartyads</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
</tr>
<tr>
<td class="data-tbody-td" style="width:265px;padding-left: 10px;text-align: left;">FUN-2022-11-1015-168</td>
<td class="data-tbody-td">2022-11</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">smartyads</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
</tr>
<tr>
<td class="data-tbody-td" style="width:265px;padding-left: 10px;text-align: left;">FUN-2022-11-1015-168</td>
<td class="data-tbody-td">2022-11</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">smartyads</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
</tr>
<tr>
<td class="data-tbody-td" style="width:265px;padding-left: 10px;text-align: left;">FUN-2022-11-1015-168</td>
<td class="data-tbody-td">2022-11</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">smartyads</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
</tr>
<tr>
<td class="data-tbody-td" style="width:265px;padding-left: 10px;text-align: left;">FUN-2022-11-1015-168</td>
<td class="data-tbody-td">2022-11</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">smartyads</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
</tr>
<tr>
<td class="data-tbody-td" style="width:265px;padding-left: 10px;text-align: left;">FUN-2022-11-1015-168</td>
<td class="data-tbody-td">2022-11</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">smartyads</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
</tr>
<tr>
<td class="data-tbody-td" style="width:265px;padding-left: 10px;text-align: left;">FUN-2022-11-1015-168</td>
<td class="data-tbody-td">2022-11</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">smartyads</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">-</td>
<td class="data-tbody-td">
<div class="icon-box-in-table">
<img src="../../assets/src/pen-gray.png" class="icon-in-table" οnclick="showDetail(this)">
</div>
</td>
<td class="data-tbody-td">-</td>
</tr>
</tbody>
</table>
</body>
</html>