帶滾動頁面主體的固定表格標題

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