标签：固定 表头 标题 nth th child td 多列 CSS
在项目开发过程中，遇到需要固定表头和左侧列的情况，查了很多资料，网上有的给的是两表格进行固定，要计算两个表格每一行的高度，非常复杂。于是参考了一些网上的资料，动手写了一个复杂表头和多列同时固定的Demo，废话不多说，直接上代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯css实现表格多行多列固定</title>
<style>
.main {
width: 800px;
overflow: auto;
height: 208px; /* 设置固定高度 */
}
td, th {
/* 设置td,th宽度高度 */
border: 1px solid gray;
width: 150px;
height: 30px;
background-color: white;
}
table {
table-layout: fixed;
width: 200px; /* 固定宽度 */
}
/*设置列固定*/
td:first-child, th:first-child {
position: sticky;
left: 0; /* 首行永远固定在左侧 */
}
td:nth-child(2), th:nth-child(2) {
position: sticky;
left: 150px; /* 首行永远固定在左侧 */
}
td:nth-child(3), th:nth-child(3) {
position: sticky;
left: 300px; /* 首行永远固定在左侧 */
}
/*设置行固定*/
thead tr:first-child th {
position: sticky;
top: 0;
}
thead tr:nth-child(2) th {
position: sticky;
top: 34px;
}
/*左侧th浮在最上层*/
th:first-child,th:nth-child(2),th:nth-child(3) {
z-index: 3;
}
/*通过第二行的th固定确定右侧th的层次*/
thead tr:nth-child(2) th {
z-index: 2;
}
</style>
</head>
<body>
<div id="app">
<div class="main">
<table cellspacing="0">
<thead>
<tr>
<th rowspan="2">标题1</th>
<th rowspan="2">标题2</th>
<th rowspan="2">标题3</th>
<th colspan="2">标题4</th>
<th colspan="2">标题5</th>
<th colspan="2">标题6</th>
</tr>
<tr>
<th>标题4_1</th>
<th>标题4_2</th>
<th>标题5_1</th>
<th>标题5_2</th>
<th>标题6_1</th>
<th>标题6_2</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in 30" key="index">
<td>行1</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr v-for="(item, index) in 30" key="index">
<td>行2</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr v-for="(item, index) in 30" key="index">
<td>行3</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr v-for="(item, index) in 30" key="index">
<td>行4</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr v-for="(item, index) in 30" key="index">
<td>行5</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr v-for="(item, index) in 30" key="index">
<td>行6</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr v-for="(item, index) in 30" key="index">
<td>行7</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr v-for="(item, index) in 30" key="index">
<td>行8</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
View Code
标签：固定,表头,标题,nth,th,child,td,多列,CSS 来源： https://www.cnblogs.com/yscit/p/15847800.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。