css - 如何仅在 CSS 中滚动表格(水平/宽度)
问题描述
我可能不是第一个提出这个问题的人,但我在任何地方都找不到可行的解决方案。
这是我的页面的一个极其简化的版本
<table style="white-space:nowrap;font-size:30px"><tr><td style="background-color:blue">SIDE NAV SIDE NAV</td><td>
<table style="overflow-y:auto">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
<th>Twitter</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td data-column="First Name">James</td>
<td data-column="Last Name">Matman</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@james</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Andor</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Designer</td>
<td data-column="Twitter">@andornagy</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Tamas</td>
<td data-column="Last Name">Biro</td>
<td data-column="Job Title">Game Tester</td>
<td data-column="Twitter">@tamas</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Zoli</td>
<td data-column="Last Name">Mastah</td>
<td data-column="Job Title">Developer</td>
<td data-column="Twitter">@zoli</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Szabi</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@szabi</td>
<td>Jack and jill wen up the hill</td>
</tr>
</tbody>
</table> </td></tr></table>
现在我希望只有table
应该滚动。侧导航应始终可见。
我还尝试了一个div
带有flex
, 而不是a 的版本table
,但存在同样的问题。
这是div
版本
<div style="white-space:nowrap;display:flex;font-size:30px"><div style="background-color:blue">SIDE NAV SIDE NAV</div><div>
<table style="overflow-y:auto">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
<th>Twitter</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td data-column="First Name">James</td>
<td data-column="Last Name">Matman</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@james</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Andor</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Designer</td>
<td data-column="Twitter">@andornagy</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Tamas</td>
<td data-column="Last Name">Biro</td>
<td data-column="Job Title">Game Tester</td>
<td data-column="Twitter">@tamas</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Zoli</td>
<td data-column="Last Name">Mastah</td>
<td data-column="Job Title">Developer</td>
<td data-column="Twitter">@zoli</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Szabi</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@szabi</td>
<td>Jack and jill wen up the hill</td>
</tr>
</tbody>
</table> </div>
如果我将硬编码的固定宽度放在表格中,那么它可以正常工作。但我当然不想要一个固定的宽度。它必须适用于任何尺寸的屏幕/浏览器。
如何实现?
FWIW:这是 codepen 中的 2 个版本
表: https ://codepen.io/yisman/pen/LYLKzbw
div:https ://codepen.io/yisman/pen/GREbMON
谢谢
解决方案
我不知道你的意思,但希望它可以帮助你。
.container {
width: 100%;
overflow: scroll;
}
.sidebar {
position: sticky;
top: 0;
left: 0;
}
<div class="container" style="white-space:nowrap;display:flex;font-size:30px"><div class="sidebar" style="background-color:blue">SIDE NAV SIDE NAV</div><div>
<table style="overflow-y:auto">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
<th>Twitter</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td data-column="First Name">James</td>
<td data-column="Last Name">Matman</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@james</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Andor</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Designer</td>
<td data-column="Twitter">@andornagy</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Tamas</td>
<td data-column="Last Name">Biro</td>
<td data-column="Job Title">Game Tester</td>
<td data-column="Twitter">@tamas</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Zoli</td>
<td data-column="Last Name">Mastah</td>
<td data-column="Job Title">Developer</td>
<td data-column="Twitter">@zoli</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Szabi</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@szabi</td>
<td>Jack and jill wen up the hill</td>
</tr>
</tbody>
</table> </div>
推荐阅读
- html - 引导输入组无法正常工作
- power-automate - 私人频道中 Excel 文件的流程
- css - 在表格上设置宽度时如何在列之间平均分配额外的空间
- php - PHP:如何从非文件的数据中下载部分内容。EG 数据存储在从 AWS S3 存储桶中提取的变量中
- arrays - Excel:根据达到的阈值并匹配字符串来更改单元格的颜色
- reactjs - API 路由中的无效挂钩调用
- c++ - 用于计算数组中元素频率的代码不起作用
- javascript - 多个范围输入(滑块)的值不会改变
- java - Apache Calcite SqlParser 使用某些 Postgres 关键字失败
- javascript - 将django html模板提取为pdf