[英]Responsive horizontal scrolling table with fixed columns
我想创建一个表,该表具有两个固定的列,左右两边,中间有一个水平滚动的部分。 一个问题是,由于表是响应式的,因此无法为溢出提供宽度值,并且可以有任意数量的列或行。
在此处查看样机-中间部分滚动,但左右两列保持固定。
我已经通过将三个不同的表一起浮动来尝试此操作,但这很麻烦并且很难维护。
<table>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
<div class="scrollable-section">
<table>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
</div>
<table>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
基本上,我想在一个表中实现此功能,如果需要使用此标记,我不介意添加任何JavaScript代码:
table { position: relative; width: calc(100% - 200px); margin-left: 100px; } table { overflow-x: scroll; } table th { background: #333; color: #fff; padding: 12px; } table td:first-of-type, table th:first-of-type { /* fixed left column */ position: absolute; left: -100px; width: 100px; } table td:last-of-type, table th:last-of-type { /* fixed right column */ position: absolute; right: -100px; width: 100px; }
<table> <thead> <tr> <th>Row titles</th> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> <th></th> </tr> </thead> <tbody> <tr> <td>Row title</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td><button>Do something</button></td> </tr> <tr> <td>Row title</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td><button>Do something</button></td> </tr> </tbody> </table>
您可以尝试的数据表的逻辑,也有一些很好的贡献已经可用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.