- table tr 中的th 与td 在列数较多时，无法设置宽度，原因display:table-block。
- 解决方案：内部设置span行内标签，撑开td的宽度；
- 冻结列的问题。
- 超出页面显示可视区域，后层冻结的数据列会覆盖到前面已冻结的数据列的上方。
- 冻结列的问题出现原因：
- position:sticky;导致粘在了页面的固定某个位置。
- 滚动时超出页面的数据列，会依次往前推。
- 解决思路：
- 使用z-index冻结的数据列显示在上层。
- 使用z-index冻结的冻结列中的最后一列，将数据列显示在下方。
- 解决思路2：
- 超出可视区与的数据列，本身就不需要显示，直接将滚动按钮给禁止即可。
- 运行效果：
- 代码：未修改版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box{
width: 800px;
/* 修改盒子的宽度模拟冻结的列，是否超出显示范围 */
height: 300px;
overflow: auto;
}
table{
width: 100%;
height: 100%;
/* 必须设置table的宽度 */
border-collapse: collapse;
/* 清除额外的空间计算错误问题 */
border-spacing:0;
/* box-sizing: border-box; */
}
/* 首行固定：选中整行,如果选中行内部的单元格层级问题覆盖错位！！！！ */
thead tr {
position: sticky;
top: 0;
z-index: 99;
/* 首行的层级确保最高 */
background-color: #ddd;
height: 60px;
}
/* 首列固定:选中首列所有的单元格 */
tr th:first-child,tr td:first-child{
/* position: sticky;
left: 0; */
background-color: #d3eff4;
}
/* 基本参数设置 */
th,td{
text-align: center;
border: 1px solid #575656;
}
/* 单元格的内部参数模拟 */
tr td span{
display: inline-block;
width: 146px;
height: 100px;
}
/* 冻结第一列 */
tr th:nth-child(1),tr td:nth-child(1){
position: sticky;
left: 0;
background-color: pink;
z-index: 98;
}
/* 冻结第二列 */
tr th:nth-child(2),tr td:nth-child(2){
position: sticky;
left: 150px;
/* 第二列的冻结修改left的距离，三四列以此类推！！！ */
background-color: pink;
z-index: 98;
}
/* 冻结第三列 */
tr th:nth-child(3),tr td:nth-child(3){
position: sticky;
left: 300px;
background-color: pink;
z-index: 98;
}
/* 冻结第四列 */
tr th:nth-child(4),tr td:nth-child(4){
position: sticky;
left: 450px;
background-color: pink;
z-index: 97;
/* 最后冻结的一列修改层级低于前几列冻结，让滚动的显示在下方而不是遮盖在上方 */
}
/* 总结： */
/* 1. 被冻结的层级可设置为相同
2. 首行的层级为最高；
3. 首行选中的整行，而非内部的单元格
4. 表格宽度较小时，横向拖动，最后一列会略微移动*/
</style>
<body>
<div class="box">
<table id="input">
<thead>
<tr>
<th>首列标题</th>
<th>我们是标题1</th>
<th>我们是标题2</th>
<th>我们是标题3</th>
<th>我们是标题4</th>
<th>我们是标题5</th>
<th>我们是标题6</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>首列</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
</tr>
<tr>
<td><span>首列</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
</tr>
<tr>
<td><span>首列</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
</tr>
<tr>
<td><span>首列</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
</tr>
<tr>
<td><span>首列</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
<td><span>单元格内容</span></td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
const box=document.getElementById('box');
box.addEventListener('scroll',()=>{
let left = document.documentElement.scrollLeft
console.log(left);
})
</script>
</html>
