表格冻结案例及问题
[*]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>
<body>
<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>首列</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
<tr>
<td>首列</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
<tr>
<td>首列</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
<tr>
<td>首列</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
<tr>
<td>首列</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
</tbody>
</table>
</body>
</html>
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]