Question

我正在开发一个显示很多行的表的网页。用户应该能够滚动表格，并在表格的顶部固定<thead>。

<table>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <!--Many other columns-->
    </tr>
  </thead>
  <tbody>
    <!--Many tr and tds-->
  </tbody>
</table>

如果需要CSS或JavaScript（甚至jQuery）并不重要，但它们应该在IE7中工作。

我尝试了很多插件，但是大多数插件通过分离<thead>和<tbody>并克隆另一组<div>包装来修改DOM。我需要保留DOM结构，因为我有其他依赖于DOM结构的插件和脚本。（可以在<div>）

之外添加<table>包装

非常感谢你。

Answer 1

在这里，您必须为表结构提供单独的position属性。

由于您未提供任何代码，我建议您将以下css应用于您的代码。

table {
  position: relative
}

thead {
  position: fixed;
  top: 0;
  height: 60px; // modify height accordingly
}

tbody {
  position: absolute;
  top: 60px; // height of thead
  overflow-y: auto;
  height: 120px; // height after which you want the scroll
}

特别是对于IE7，你需要添加一个表达式，

thead tr {
   position: relative;
   top: expression(this.offsetParent.scrollTop);
}

在IE7中保留DOM时修复滚动

1 个答案: