带有滚动页面正文的固定表头

Question

最初滚动，然后固定表格标题和滚动页面正文。

我想在我的网页中间的某处放置一个具有以下行为的表格：

1. 在大多数情况下，它就像一个“普通”的 html 表格......直到您滚动过去表格的标题
2. 当您滚动过去表格的标题时，表格标题将固定在该页面的顶部或附近，而表格的其余部分将与页面正文的其余部分一起滚动。 这和滚动不一样 <tbody> 和固定的<thead>。
3. 如果滚动超过表格的最后一行，表格标题会消失，则会获得奖励积分。
4. 如果表格行在滚动到标题上方时消失，则会获得奖励积分。 （仅当/如果我尝试将固定表头放置在与页面顶部不同的位置时，我才需要此功能）

它应该类似于这个小提琴中给出的示例：
http://jsfiddle.net/yeAhU/260/
除了标题内容会在固定之前滚动到页面顶部，并且表格内容在滚动时不应显示在标题上方。

我已经尝试稍微调整大多数在线发布的“固定表格标题滚动正文”问题的答案，但我无法从这些示例中获得我正在寻找的行为类型。

如果可能的话，我希望解决方案是基于 CSS 的，但我对 JS 等其他解决方案持开放态度。

我希望该解决方案与 Chrome 和 Firefox 兼容。

---

问题

是否有可能做到这一点，是否有可能只在 CSS 中做到这一点？ 怎么样？

Answer 1

在 CSS 中，您可以使用 position:sticky;，但由于 Firefox 还不能很好地混合这两者，您仍然需要使用 thead 和 tbody 来打破表格布局以使用粘性。 ...重置 tbody 上的表格布局并将表格布局设置为固定，以帮助将来自 thead/tbody 的列在视觉上保持在一起...示例：

http://jsfiddle.net/yeAhU/261/ 我相信它符合以下几点：1,2,3（实际上 4 是什么？）

http://caniuse.com/#search=sticky

chrome removed it a while ago下一个链接可能会有所帮助

https://www.sitepoint.com/css-position-sticky-introduction-polyfills/

tbody, thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
td {
  border:1px solid;
}
* {box-sizing:border-box; border-collapse:collapse;}

Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>

<table width="400" border="0" style="display:block;">
  <thead style="display:block;position: sticky;top:20px;background-color: grey;">
    <tr>
      <td width="200">
        Name
      </td>
      <td width="200">
        Age
      </td>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td width="200">
      &nbsp;
    </td>
    <td width="200">
      &nbsp;
    </td>
  </tr>
  <tr>
    <td>
      John
    </td>
    <td>
      28
    </td>
  </tr>
  <tr>
    <td>
      Jacob
    </td>
    <td>
      22
    </td>
  </tr>
  <tr>
    <td>
      Nicole
    </td>
    <td>
      12
    </td>
  </tr>
  <tr>
    <td>
      Marie
    </td>
    <td>
      15
    </td>
  </tr>
  <tr>
    <td>
      Fabian
    </td>
    <td>
      18
    </td>
  </tr>
  <tr>
    <td>
      Caspar
    </td>
    <td>
      23
    </td>
  </tr>
  <tr>
    <td>
      Elder
    </td>
    <td>
      12
    </td>
  </tr>
  <tr>
    <td>
      Frank
    </td>
    <td>
      17
    </td>
  </tr>
  <tr>
    <td>
      Ling
    </td>
    <td>
      45
    </td>
  </tr>
  <tr>
    <td>
      Pong
    </td>
    <td>
      68
    </td>
  </tr>
  <tr>
    <td>
      Jason
    </td>
    <td>
      67
    </td>
  </tr>
  <tr>
    <td>
      Tony
    </td>
    <td>
      23
    </td>
  </tr>
  <tr>
    <td>
      Britney
    </td>
    <td>
      21
    </td>
  </tr>
  <tr>
    <td>
      Cusac
    </td>
    <td>
      91
    </td>
  </tr>
  <tr>
    <td>
      John
    </td>
    <td>
      28
    </td>
  </tr>
  <tr>
    <td>
      Jacob
    </td>
    <td>
      22
    </td>
  </tr>
  <tr>
    <td>
      Nicole
    </td>
    <td>
      12
    </td>
  </tr>
  <tr>
    <td>
      Marie
    </td>
    <td>
      15
    </td>
  </tr>
  <tr>
    <td>
      Fabian
    </td>
    <td>
      18
    </td>
  </tr>
  <tr>
    <td>
      Caspar
    </td>
    <td>
      23
    </td>
  </tr>
  <tr>
    <td>
      Elder
    </td>
    <td>
      12
    </td>
  </tr>
  <tr>
    <td>
      Frank
    </td>
    <td>
      17
    </td>
  </tr>
  <tr>
    <td>
      Ling
    </td>
    <td>
      45
    </td>
  </tr>
  <tr>
    <td>
      Pong
    </td>
    <td>
      68
    </td>
  </tr>
  <tr>
    <td>
      Jason
    </td>
    <td>
      67
    </td>
  </tr>
  <tr>
    <td>
      Tony
    </td>
    <td>
      23
    </td>
  </tr>
  <tr>
    <td>
      Britney
    </td>
    <td>
      21
    </td>
  </tr>
  <tr>
    <td>
      Cusac
    </td>
    <td>
      91
    </td>
  </tr>
  <tr>
    <td>
      John
    </td>
    <td>
      28
    </td>
  </tr>
  <tr>
    <td>
      Jacob
    </td>
    <td>
      22
    </td>
  </tr>
  <tr>
    <td>
      Nicole
    </td>
    <td>
      12
    </td>
  </tr>
  <tr>
    <td>
      Marie
    </td>
    <td>
      15
    </td>
  </tr>
  <tr>
    <td>
      Fabian
    </td>
    <td>
      18
    </td>
  </tr>
  <tr>
    <td>
      Caspar
    </td>
    <td>
      23
    </td>
  </tr>
  <tr>
    <td>
      Elder
    </td>
    <td>
      12
    </td>
  </tr>
  <tr>
    <td>
      Frank
    </td>
    <td>
      17
    </td>
  </tr>
  <tr>
    <td>
      Ling
    </td>
    <td>
      45
    </td>
  </tr>
  <tr>
    <td>
      Pong
    </td>
    <td>
      68
    </td>
  </tr>
  <tr>
    <td>
      Jason
    </td>
    <td>
      67
    </td>
  </tr>
  <tr>
    <td>
      Tony
    </td>
    <td>
      23
    </td>
  </tr>
  <tr>
    <td>
      Britney
    </td>
    <td>
      21
    </td>
  </tr>
  <tr>
    <td>
      Cusac
    </td>
    <td>
      91
    </td>
  </tr>
  <tr>
    <td>
      John
    </td>
    <td>
      28
    </td>
  </tr>
  <tr>
    <td>
      Jacob
    </td>
    <td>
      22
    </td>
  </tr>
  <tr>
    <td>
      Nicole
    </td>
    <td>
      12
    </td>
  </tr>
  <tr>
    <td>
      Marie
    </td>
    <td>
      15
    </td>
  </tr>
  <tr>
    <td>
      Fabian
    </td>
    <td>
      18
    </td>
  </tr>
  <tr>
    <td>
      Caspar
    </td>
    <td>
      23
    </td>
  </tr>
  <tr>
    <td>
      Elder
    </td>
    <td>
      12
    </td>
  </tr>
  <tr>
    <td>
      Frank
    </td>
    <td>
      17
    </td>
  </tr>
  <tr>
    <td>
      Ling
    </td>
    <td>
      45
    </td>
  </tr>
  <tr>
    <td>
      Pong
    </td>
    <td>
      68
    </td>
  </tr>
  <tr>
    <td>
      Jason
    </td>
    <td>
      67
    </td>
  </tr>
  <tr>
    <td>
      Tony
    </td>
    <td>
      23
    </td>
  </tr>
  <tr>
    <td>
      Britney
    </td>
    <td>
      21
    </td>
  </tr>
  <tr>
    <td>
      Cusac
    </td>
    <td>
      91
    </td>
  </tr></tbody>
</table>

Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>

Answer 2

这是您的解决方案.. fiddle by Jonas Schubert Erlandsson

<section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th>
            Table attribute name
            <div>Table attribute name</div>
          </th>
          <th>
            Value
            <div>Value</div>
          </th>
          <th>
            Description
            <div>Description</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
        </tr>
        <tr>
          <td>bgcolor</td>
          <td>rgb(x,x,x), #xxxxxx, colorname</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
        </tr>
        <tr>
          <td>border</td>
          <td>1,""</td>
          <td>Specifies whether the table cells should have borders or not</td>
        </tr>
        <tr>
          <td>cellpadding</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
        </tr>
        <tr>
          <td>cellspacing</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between cells</td>
        </tr>
        <tr>
          <td>frame</td>
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
          <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
        </tr>
        <tr>
          <td>rules</td>
          <td>none, groups, rows, cols, all</td>
          <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
        </tr>
        <tr>
          <td>summary</td>
          <td>text</td>
          <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
        </tr>
        <tr>
          <td>width</td>
          <td>pixels, %</td>
          <td>Not supported in HTML5. Specifies the width of a table</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

和css

html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}