[英]Table with horizontal and vertical scroll with fixed header
I do have a table with horizontal and vertical scroll with a fixed header with elements taking as much as space it needs.我确实有一个带有水平和垂直滚动的表格,带有固定的标题,其中元素占用了所需的空间。 I am working with React.我正在使用 React。 It would be awesome if there is a react based solution too if CSS alone cannot solve it.如果仅靠 CSS 无法解决,那么如果也有基于反应的解决方案,那就太棒了。
There's a simple CSS solution to fix rows(headers) and columns in a table.有一个简单的 CSS 解决方案来修复表格中的行(标题)和列。
th {
position: sticky:
top: 0;
}
The above snippet will fix the header to the top.上面的代码片段将标题固定到顶部。 Then it's just a matter of adding a simple overflow to the parent container of the table.然后只需向表的父容器添加一个简单的溢出即可。 You can find a simple example below -你可以在下面找到一个简单的例子 -
.table-container { overflow: auto; max-height: 160px; border: 1px solid red; } th { position: sticky; top: 0; background: white; }
<div class="table-container"> <table> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> <th>Head 4</th> </tr> </thead> <tbody> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </tbody> </table> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.