Question

我有一张大约300行12列的大表。通过页面翻页滚动表格时，默认情况下不显示<thead>内容。我想在“{1}}内”滚动时看到它。也就是说，如果屏幕顶部以一行开头，我希望首先显示标题。否则它应该像常规表一样。

到目前为止，我看到的常见解决方案是创建一个可以自行滚动的表（因此与页面滚动无关）。也就是answers to this question建议的内容。

但是如果跨越屏幕有很多列，这不是很实用，特别是因为现在有两个独立的滚动条。在移动设备上，第二个滚动条带走了大量宝贵的空间。使用它也很烦人。你不能简单地“翻身”，但你必须集中精力去击中那个小小的滚动条。在其他浏览器上，你可以滚动触摸其中的数据，但一旦你移出外面，另一个恼人的运动发生......

有一种干净的CSS方式吗？

Answer 1

希望立场：粘性有一天能成为这个问题的明确答案（参见announcement here），就像上面的评论中提到的那样，我仍然着迷于制作一个简单的HTML / CSS概念验证，没有双滚动条。

我的简单解决方案 - 不是一个完美的解决方案，更像是一个练习 - 没有脚本：

复制thead，一个滚动页面，一个保持固定
使用z-index播放以显示相应的thead

http://jsfiddle.net/willemvb/hEyZh/

Answer 2

如果您：

怎么办？

根据需要创建您的表格，无需标题。用你的桌头创建另一个表。将标题表放在单独的DIV中并将其浮动到数据表上（z-index + position：absolute）。使用JQuery，在窗口加载，调整大小，滚动或任何相关事件时，您可以重置每个TH宽度以匹配其相应的TD。您还可以在滚动时重新定位表头DIV。这应该工作。如果您需要一个例子，请告诉我。这样，只有在需要时才能看到浏览器滚动条。

祝你好运。

Answer 3

这可能会对您有所帮助：

Source from

JS Fiddle

<强> HTML

 <!-- IE < 10 does not like giving a tbody a height.  The workaround here applies the scrolling to a wrapped        <div>. -->
 <!--[if lte IE 9]>
<div class="old_ie_wrapper">
 <!--<![endif]-->

 <table class="fixed_headers">
     <thead>
 <tr>
  <th>Name</th>
  <th>Color</th>
  <th>Description</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Apple</td>
  <td>Red</td>
  <td>These are red.</td>
</tr>
<tr>
  <td>Pear</td>
  <td>Green</td>
  <td>These are green.</td>
</tr>
<tr>
  <td>Grape</td>
  <td>Purple / Green</td>
  <td>These are purple and green.</td>
</tr>
<tr>
  <td>Orange</td>
  <td>Orange</td>
  <td>These are orange.</td>
</tr>
<tr>
  <td>Banana</td>
  <td>Yellow</td>
  <td>These are yellow.</td>
</tr>
<tr>
  <td>Kiwi</td>
  <td>Green</td>
  <td>These are green.</td>
</tr>
<tr>
  <td>Plum</td>
  <td>Purple</td>
  <td>These are Purple</td>
</tr>
<tr>
  <td>Watermelon</td>
  <td>Red</td>
  <td>These are red.</td>
</tr>
<tr>
  <td>Tomato</td>
  <td>Red</td>
  <td>These are red.</td>
</tr>
<tr>
  <td>Cherry</td>
  <td>Red</td>
  <td>These are red.</td>
</tr>
<tr>
  <td>Cantelope</td>
  <td>Orange</td>
  <td>These are orange inside.</td>
</tr>
<tr>
  <td>Honeydew</td>
  <td>Green</td>
  <td>These are green inside.</td>
</tr>
<tr>
  <td>Papaya</td>
  <td>Green</td>
  <td>These are green.</td>
</tr>
<tr>
  <td>Raspberry</td>
  <td>Red</td>
  <td>These are red.</td>
</tr>
<tr>
  <td>Blueberry</td>
  <td>Blue</td>
  <td>These are blue.</td>
</tr>
<tr>
  <td>Mango</td>
  <td>Orange</td>
  <td>These are orange.</td>
</tr>
<tr>
  <td>Passion Fruit</td>
  <td>Green</td>
  <td>These are green.</td>
</tr>
</tbody>
 </table>

   <!--[if lte IE 9]>
   </div>
<!--<![endif]-->

<强> CSS

 .fixed_headers {
     width: 750px;
     table-layout: fixed;
     border-collapse: collapse;
  }
 .fixed_headers th {
    text-decoration: underline;
  }
 .fixed_headers th,.fixed_headers td {
         padding: 5px;
         text-align: left;
   }
  .fixed_headers td:nth-child(1),.fixed_headers th:nth-child(1) {
         min-width: 200px;
   }
  .fixed_headers td:nth-child(2),.fixed_headers th:nth-child(2) {
         min-width: 200px;
    }
    .fixed_headers td:nth-child(3),.fixed_headers th:nth-child(3) {
        width: 350px;
    }
   .fixed_headers thead {
              background-color: #333333;
              color: #fdfdfd;
    }
    .fixed_headers thead tr {
             display: block;
             position: relative;
    }
    .fixed_headers tbody {
             display: block;
             overflow: auto;
             width: 100%;
             height: 300px;
    }
    .fixed_headers tbody tr:nth-child(even) {
             background-color: #dddddd;
    }
    .old_ie_wrapper {
            height: 300px;
            width: 750px;
            overflow-x: hidden;
            overflow-y: auto;
     }
    .old_ie_wrapper tbody {
            height: auto;
      }

Source from

JS Fiddle

Answer 4

你可以使用这个插件，它工作正常： http://web-gladiator.com/stickythead/

：在HTML / CSS <table> <thead> </thead> <tbody> </tbody> </table>中滚动时如何显示

4 个答案: