- 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%;
border-collapse: collapse;
border-spacing:0;
}
thead tr {
position: sticky;
top: 0;
z-index: 99;
background-color: #ddd;
height: 60px;
}
tr th:first-child,tr td:first-child{
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;
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;
}
</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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体