带滚动页面主体的固定表格标题

Question

最初滚动，然后用滚动页面主体固定表格标题。

我想提出一个表的地方在我的网页的中间有以下行为：

1. 就像一个“正常”的HTML表格在大多数情况下......直到你滚过表格的标头
2. 当您滚动浏览表格标题时，表格标题会保持固定在该页面的顶部或附近，而表格的其余部分则会一直滚动页面正文的其余部分。 这与滚动<tbody>与固定<thead>不一样。
3. 如果您滚动表格的最后一行，表格标题消失，则为奖励点数。
4. 如果表格行在滚动高于标题时消失，则为奖励点。 （当我尝试将固定表格标题放在与页面顶部不同的位置时，我只需要此功能）

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

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

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

我希望这个解决方案能够兼容两种Chrome & Firefox。

---

问题

是否有可能做到这一点，是有可能做到这一点，在短短CSS？ 如何？

Answer 1

在CSS中，您可以使用position:sticky;，但由于Firefox不会混合这两个，所以仍然需要使用add和tbody来打破表格布局以使用粘性。 ...重置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; 
}