Question

我有一张动态表格。选择from，to datepicker日期时，表格会自动生成。如何在滚动时始终将表头部分固定在顶部。而且我还需要让它成为流体

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

Answer 1

尝试使用这种CSS样式：

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

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

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;
}

Answer 2

你看起来像下面的jsfiddle

<table border="1" cellpadding="0">
  <thead>
<tr>
  <th class="month">Month</th>
  <th class="saving">Savings</th>
</tr>
 </thead>
 <tfoot>
<tr>
  <td>Sum</td>
  <td>$180</td>
</tr>
 </tfoot>
 <tbody>
<tr>
  <td>January</td>
  <td>$100</td>
</tr>
<tr>
  <td>February</td>
  <td>$80</td>
</tr>
<tr>
  <td>January</td>
  <td>$100</td>
</tr>
<tr>
  <td>February</td>
  <td>$80</td>
</tr>
  <tr>
  <td>January</td>
  <td>$100</td>
</tr>
<tr>
  <td>February</td>
  <td>$80</td>
</tr>
  <tr>
  <td>January</td>
  <td>$100</td>
</tr>

 </tbody>
  </table>

http://jsfiddle.net/h5t98/

Answer 3

您想要做的是从表格的标题中分离表格的内容。您只想滚动元素。您可以使用和元素在HTML中轻松定义此分隔。现在表格的标题和正文仍然相互连接，它们仍然具有相同的宽度（和相同的滚动属性）。现在让他们不要工作＆＃39;作为一个表格，你可以设置display：block。这样thead和tbody是分开的。

table tbody, table thead
{
    display: block;
}

现在您可以将滚动设置为表格的主体：

table tbody 
{
   overflow: auto;
   height: 100px;
}

最后，因为thead不再与正文共享相同的宽度，所以你应该为表格的标题设置一个静态宽度：

th
{
    width: 72px;
}

请注意，您还缺少一些HTML元素。每一行都应该在一个元素中，包括标题行：

<tr>
     <th>head1</th>
     <th>head2</th>
     <th>head3</th>
     <th>head4</th>
</tr>

我希望这就是你的意思。

jsFiddle

Answer 4

我相信如果你使用AJAX会帮助你。

如何在滚动时修复动态表头

4 个答案: