我有一个表，它有很多列，基本上，table有table-responsive类，它带有以下CSS设置：
.table-responsive {
display: block;
width: 100%;
overflow-x: scrollbar;
}并且它正确地显示了水平滚动条：
但问题是，这个滚动条出现在表的末尾，我希望它显示在显示数据的表的顶部（第一行的顶部）。
那么，如何将水平滚动条移动到表格顶部（<thead>之后）？
<table class="table table-bordered table-sm">
<thead class="thead-dark">
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
..
<th>Col 10</th>
</tr>
</thead>
<tbody>
<tr>
...
</tr>
</tbody>
</table>
2条答案
按热度按时间svujldwt1#
一个180度的变换将滚动条旋转到顶部，然后再旋转180度将内容放回原处。我添加了一个
div和随机内容到你的表中，只是为了方便。第一个
oalqel3c2#
没有直接的CSS支持，而且浏览器在技术上可以自由实现这个特性，所以大多数滚动条都是底部和右侧的，用于x和y溢出。也就是说，我找到了一个nice trick，它可以满足您的需求：
这里我们需要做的是“翻转”外盒，使其上下颠倒，然后将里面的内容翻转回右侧，使其清晰可辨。
你可能需要做一些实验才能做到这一点，但它应该会有一些工作。