- A+
所属分类：Web前端
- 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> 
