html - 我怎样才能在我的桌子内滚动？
问题描述
我正在尝试在 HTML 中做一些类似于 Excel 的工作表，但它不起作用。这个想法是修复我的表格的某些列并在其他列的其余部分放置一个滚动条。我正在寻求帮助，看到一些评论说要把两张桌子放在一张更大的桌子里。我将展示我的示例：
<html>
<head>
<meta charset="utf-8"/>
<title>How can I do a Scroll in a specific part of my screen?</title>
</head>
<body>
<div id="maindiv">
<table id="maintable">
<tbody>
<tr>
<th id="colfixed">
<table id="fixedtable">
<tbody>
<tr>
<th> Name </th>
</tr>
<tr>
<td> Person 1 </td>
</tr>
<tr>
<td> Person 2 </td>
</tr>
<tr>
<td> Person 3 </td>
</tr>
</tbody>
</table>
</th>
<th id="colscroll">
<table id="scrolltable">
<tbody>
<tr>
<th> Day 1 </th>
<th> Day 2 </th>
<th> Day 3 </th>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
<td> 1 </td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</div>
</body>
<html>
关键是：我希望人们的名字始终可见，并为天的列提供侧滚动（此示例显示 3 天，但我可能有 100 多天）。基本上就是这样。如果你们知道任何更好的 HTML 结构来做到这一点，或者如果有一些 CSS 属性可以做到这一点，我会很高兴知道！
（我试图使用一些overflow: scrolland border-collapse: collapse，但它没有像我预期的那样工作）。
解决方案
您可以查看position:sticky 它的 polyfills（以支持过时的浏览器）：https ://css-tricks.com/position-sticky-2/
CSS 演示（无需叠表，单表即可）：
div {
max-width: 100%;
overflow: auto;
position: relative
}
tr> :first-child {
background: gray;
position: sticky;
left: 0;
}<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
<th>day</th>
</tr>
</thead>
<tbody>
<tr>
<th>person</th>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<th>person</th>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<th>person</th>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<th>person</th>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<th>person</th>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
</div>
推荐阅读
- r - R - 从列中删除 @ 之后的所有内容
- python - 如何检查一个数组是否包含另一个数组的所有元素？如果不是，输出缺失的元素
- reactjs - 我如何从firebase下载任何文件以做出反应？
- arrays - 在字节数组上使用 json.Unmarshal() 时出现问题
- elasticsearch - 在 Elasticsearch 中将 int 转换为时间戳获取小时
- bash - 当旧的 Git 仍然存在时如何从头开始新的 Git
- xamarin - 完成后如何禁用Syncfusion的自动完成移动到下一个条目？
- java - SignalR（ASP .Net）-“ConnectionId 的格式不正确”-使用自己的 Java Websocket 客户端的 websocket 问题
- python - 将带有硬编码换行符的字符串转换为python中的矩阵
- python - 在 pandas 数据框中找到第一次出现的值（从值列表中）并返回该行的索引