<；表>；：怎么能<；thead>；在滚动浏览时显示<；t车身>；在HTML/CSS中

我有一张大约300行12列的大桌子。通过页面翻页滚动表格时，默认情况下不显示

内容。我想在滚动“内”时查看它。也就是说，如果屏幕顶部以一行开始，我希望首先显示标题。否则，它的行为应该类似于常规表

到目前为止，我看到的常见解决方案是创建一个可以自己滚动的表（因此独立于页面滚动）。这就是我的建议

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

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

如果您：

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

祝你好运。

希望有一天，sticky会成为这个问题的最终答案（见上文评论中提到的），我仍然着迷于制作一个简单的HTML/CSS概念验证，没有双滚动条

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

• 复制thead，一个随页面滚动，另一个保持固定
• 使用z索引显示相应的THAD

---

您可以使用该插件，它工作正常： 这可能会帮助您：

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]-->

---

恐怕不能没有脚本，否则您将不得不等待'position:sticky'css支持+1，我想要

position:sticky

：D

Chrome 23+启用WebKit实验，为我升级了一个版本：我在回答另一个问题，我会在一秒钟内发布我的答案。我的解决方案并不比另一个问题的答案好+1：你的意思是：；是吗？我已经从头开始构建了man数据网格，但不幸的是，我想不出一个纯粹的CSS解决方案，可以在不使用JS的情况下满足所有用户/数据场景。肯定会欢迎一种新的/创造性的方法来实现这一点。@BryanAllo：您提出的解决方案的演示已经给出（我在中找到了）。+1。奇怪的是，关于表的W3文档明确提到了这种可能性。尽管如此，仍然没有干净的解决方案，但是…看起来很不错。然而，当“真实”表格标题没有完全向上滚动时，我知道。请参阅JSFIDLE中的描述：“AD重叠上的小故障”。我还没有找到一种不用脚本就可以解决这个问题的方法。如果单元格中的文本太长，这也会失败long@Steven，普通文本将回流，对于更长的字符串，您可以使用文本省略号：或只是使单元格更宽：）再次，这只是一个练习，不是理想的解决方案。感谢您提供有趣的解决方案。看起来就像提供的一样。从某种意义上说，此解决方案会重复，这也会为页眉创建单独的表，为正文创建单独的表。

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