css 实现table表头固定,内容进行滚动 (两种方式)
首先要明确功能需求:固定表头table垂直滚动条table列宽自适应第一种方式:纯css<!DOCTYPE html><!-- 不加此标签,IE不生效 --><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta http-equiv="pra
·
首先要明确功能需求:
- 固定表头
- table垂直滚动条
- table列宽自适应
第一种方式:纯css
<!DOCTYPE html>
<!-- 不加此标签,IE不生效 -->
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<title>表头锁定</title>
</head>
<style>
.myTable tbody {
display: block; // 进行转换为块级元素
height: 250px;
width: 900px;
overflow: auto;
text-align: center;
}
.myTable thead,
tbody tr {
display: table;
width: 900px;
table-layout: fixed;
}
.myTable thead {
background: #E4E8F3;
color: black;
}
.myTable thead tr th {
text-align: center;
}
</style>
<body>
<div id="div_1" style="padding: 1px 15px 15px 15px;margin-top: 50px; ">
<table class="myTable" id="nav_tab" border="1">
<thead>
<tr>
<th>头字段1</th>
<th>头字段2</th>
<th>头字段3</th>
<th>头字段4</th>
<th>头字段5</th>
</thead>
<tbody id="nav_tab_tbd">
<tr>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
</tr>
<tr>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
</tr>
<tr>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
</tr>
<tr>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
</tr>
<tr>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
</tr>
<tr>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
</tr>
<tr>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
</tr>
<tr>
<td>88888</td>
<td>88888</td>
<td>88888</td>
<td>88888</td>
<td>88888</td>
</tr>
<tr>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
</tr>
<tr>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
</tr>
<tr>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
</tr>
<tr>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
<td>99999</td>
</tr>
<tr>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
</tr>
<tr>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
第二种方式:使用连个div分别包裹table表格来实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
th {
border: 1px solid #e6e6e6;
line-height: 5vh;
color: #666666;
font-size: 16px;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
padding: 5px;
border: 1px solid #e6e6e6;
font-size: 14px;
}
.table-head {
padding-right: 17px;
background-color: rgb(207, 231, 179);
color: #000;
height: 5vh;
}
.table-body {
width: 100%;
max-height: 200px;
overflow: auto;
}
.table-head table,
.table-body table {
width: 100%;
}
.table-body table tr:nth-child(2n+1) {
background-color: #f2f2f2;
}
.table-body table tr:hover {
background-color: rgb(240, 249, 228);
transition: .2s;
}
</style>
</head>
<body>
<div class="wrapbox">
<div class="table-head">
<table>
<thead>
<th width="10%">头字段1</th>
<th width="30%">头字段2</th>
<th width="20%">头字段3</th>
<th width="10%">头字段4</th>
<th width="30%">头字段5</th>
</thead>
</table>
</div>
<div class="table-body">
<table>
<tbody id="tbody">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)