純css的 表頭固定的滾動表格
下載地址：https://github.com/ybx13579/table-scroll-thead-fixed/tree/master
1、效果圖預覽：
2、複製以下代碼可直接查看 或下載 ↑ ↑ ↑
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>純css 表頭固定的滾動表格</title>
<meta charset="utf-8" />
<style>
* {
margin: 0;
padding: 0;
}
.scroll_table_ot {
margin: 100px auto;
line-height: 18px;
width: 440px;
font-size: 14px;
}
.scroll_table_ot .scroll {
max-height: 370px;
border: 1px solid #6a6a6a;
border-top: 0;
overflow-y: auto;
border-right: 0;
}
.scroll_table_ot table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
}
.scroll_table_ot th, .scroll_table_ot td {
width: 120px;
padding: 10px;
border: 1px solid #6a6a6a;
}
.scroll_table_ot th {
font-weight: bold;
}
.scroll_table_ot thead th:last-child, .scroll_table_ot tbody td:last-child {
width: auto;
}
.scroll_table_ot tbody tr:first-child td {
border-top: 0;
}
.scroll_table_ot tbody tr:last-child td {
border-bottom: 0;
}
.scroll_table_ot tbody tr td:first-child {
border-left: 0;
}
.scroll_table_ot tbody tr td:last-child {
border-right: 0;
}
</style>
</head>
<body>
<div class="scroll_table_ot">
<table>
<thead>
<tr><th>編號</th><th>版本</th><th>更新日期</th></tr>
</thead>
</table>
<div class="scroll scrollbarStyle">
<table>
<tbody>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
<tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>