Question

<table border="1" style="height:50px; overflow:auto;">
  <thead>
    <tr>
      <th>Col 1
      </th>
      <th>Col 2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 3
      </td>
      <td>Cell 4
      </td>
    </tr>
    <tr>
      <td>Cell 5
      </td>
      <td>Cell 6
      </td>
    </tr>
  </tbody>
</table>

我希望上面的表格高度为50px，因此滚动条会在内容增长时启动，但我也希望表头（thead）始终位于顶部，而其他内容可以滚动。是否有解决方案，最好使用jQuery？

提前感谢您的帮助。

Answer 1

发现自己需要类似的功能。找不到任何简单明了的东西，所以我自己创建了这个插件：TH Float jQuery Plugin

我希望有人觉得它很有用。

Answer 2

这是我的伎俩。你也必须在你的HTML中改变一些东西。

技巧包括在真实滚动thead之后插入js，一个辅助且相同的thead定位固定。单元格宽度也通过js调整。

根据您的需要调整代码。

<强> CSS

thead.fixed {
  position: fixed;
}

<强> HTML

<div style="overflow: auto;">
  <table id="my_table">
    <thead>
      <tr>
        <th>Head 1</th>
        <th>Head 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
      </tr>
    </tbody>
  </table>
</div>

<强>的jQuery

$( function() {
  fixListThead();
});
$(window).resize( function() {
  fixListThead();
});
var fixListThead = function() {
  $('#my_table thead.fixed').remove(); // Removes (if present) fixed thead when resizing
  var widths = [];
  $('#my_table thead th').each( function(i, element) {
    widths[i] = $(element).width();
  });
  $('<thead class="fixed">' + $('#my_table thead').html() + '</thead>').insertAfter($('#my_table thead'));
  $('#my_table thead.fixed th').each( function(i, element) {
    $(element).css('width', widths[i] + 'px');
  });
}

Answer 3

试试这篇文章：jQuery Scrollable, Sortable, Filterable table

看起来他们已经得到了你需要的东西（这是一个可冻结的，可滚动的jquery表）。

Answer 4

<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
  <td>Column 1</td>
  <td>Column 2</td>
</tr>
</table>

<div style="overflow: auto;height: 50px; width: 320px;">
  <table style="width: 300px;" cellpadding="0" cellspacing="0">
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  </table>
</div>

<强>更新：

检查出来：

Link

Another Link a t CSS Tricks

Answer 5

使用CSS转换可能更简单：

-webkit-transform','translateY(0px)'

Answer 6

这几天，浏览器开始很好地支持css指令的位置：sticky，此问题的css答案是谁，它适用于每个问题，您无需指定表格的高度即可工作。

<style>
table th{
    position: sticky;
    top: 0px; /* pixel gap between the top and the head when it stop scrolling
}
</style>
<table border="1">
      <thead>
        <tr>
          <th>Col 1
          </th>
          <th>Col 2
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Cell 3
          </td>
          <td>Cell 4
          </td>
        </tr>
        <tr>
          <td>Cell 5
          </td>
          <td>Cell 6
          </td>
        </tr>
      </tbody>
    </table>

已在<table> </table>中修复

6 个答案: