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

Question

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

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

但是，如果屏幕上有很多列，这不是很实用，特别是因为现在有两个独立的滚动条。在移动设备上，第二个滚动条占用了大量宝贵的空间。而且使用起来也很烦人。你不能简单地“离开”，但你必须集中精力点击那个微小的滚动条。在其他浏览器上，您可以滚动触摸其中的数据，但是一旦您移到外面，就会发生另一个令人讨厌的动作......

有没有一种干净的 CSS 方法可以做到这一点？

Answer 1

希望 position:sticky 有朝一日会像上面的 cmets 中提到的那样成为这个问题的最终答案（参见 announcement here），我仍然着迷于制作简单的 HTML/CSS 证明-of-concept，没有双滚动条。

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

• 复制 thead，一个随页面滚动，一个保持固定
• 使用 z-indexes 显示适当的标题

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/