如何在滚动时修复动态表头 [英] how to fix dynamic table header while scrolling

问题描述

我有一个动态表。选择从到日期戳日期时，表会自动生成。如何在滚动时始终固定表头部分。而且我需要让它流动

I have a dynamic table. The table generates automatically when selecting the from, to datepicker dates. How can I fix the table header part on top always when scrolling. And also I need to make it Fluid

<table cellpadding="0" cellspacing="1" id="our_table">
<thead  class="header">
<tr id="dte">
<th></th>
</tr>
</thead>
</table>

推荐答案

尝试使用此CSS样式：

Try with this CSS style:

table {
    display: block;
    max-height: 80px;
    overflow-y: scroll;
}

对于适应窗口大小的表，您可以尝试 http://jsfiddle.net/user2314737/FhZZj/ （虽然可能不是最优雅的解决方案）。
如果调整窗口大小，表格将调整大小，并在需要时显示水平/垂直滚动条。

For a table that adapts to the window size you can try this http://jsfiddle.net/user2314737/FhZZj/ (although probably not the most elegant solution). If you resize the window the table gets resized and horizontal/vertical scrollbars appear when needed.

CSS：

html, body {
    width: 100%;
    height:100%;
}
.container {
    width: 60%;
    height: 60%;
}
table {
    display: block;
    max-height: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
}
th {
    white-space: nowrap;
}

这篇关于如何在滚动时修复动态表头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！