如何使我的桌子的 header 变粘？

Question

有一个表格可以在页面上变得很长，所以 header 会丢失，所以我认为粘性 header 可以解决这个问题。 您向下滚动太远，header 仍然在那里，让您知道这些字段是什么。

我尝试了一切，但它不起作用

我希望你们能帮助我。 我将分享原始代码，而无需我对其进行试验。

注意 html 很长，因为它有测试数据。

 @import "https://fonts.googleapis.com/css?family=Montserrat:300,400,700"; .rwd-table { margin: 1em 0; min-width: 300px; width: 100%; }.rwd-table.table_header{ overflow: hidden; position: relative; overflow-x: auto; }.rwd-table tr { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }.rwd-table th { display: none; }.rwd-table td { display: block; }.rwd-table td:first-child { padding-top: .5em; }.rwd-table td:last-child { padding-bottom: .5em; }.rwd-table td:before { content: attr(data-th) ": "; font-weight: bold; width: 6.5em; display: inline-block; } @media (min-width: 480px) {.rwd-table td:before { display: none; } }.rwd-table th, .rwd-table td { text-align: left; } @media (min-width: 480px) {.rwd-table th, .rwd-table td { display: table-cell; padding: .25em.5em; }.rwd-table th:first-child, .rwd-table td:first-child { padding-left: 0; }.rwd-table th:last-child, .rwd-table td:last-child { padding-right: 0; } } h1 { font-weight: normal; letter-spacing: -1px; color: #34495E; }.rwd-table { background: #34495E; color: #fff; border-radius: .4em; overflow: hidden; }.rwd-table tr { border-color: #46637f; }.rwd-table th, .rwd-table td { margin: .5em 1em; } @media (min-width: 480px) {.rwd-table th, .rwd-table td { padding: 1em;important. } },rwd-table th. :rwd-table td:before { color; #dd5; }

 <div class="main_content"> <div class="header">Welcome., Have a nice day,</div> <div class="info"> <table class="rwd-table"> <tr class="table_header"> <th>Movie Title</th> <th>Genre</th> <th>Year</th> <th>Gross</th> </tr> <tr> <td data-th="Movie Title">Star Wars</td> <td data-th="Genre">Adventure, Sci-fi</td> <td data-th="Year">1977</td> <td data-th="Gross">$460,935,665</td> </tr> <tr> <td data-th="Movie Title">Howard The Duck</td> <td data-th="Genre">"Comedy"</td> <td data-th="Year">1986</td> <td data-th="Gross">$16,295,774</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> </table> </div> </div>

Answer 1

您可以在此链接https://css-tricks.com/position-sticky-and-table-headers/上检查您不能 position 粘一个头或一个 tr，但它适用于 th。 所以添加position：粘； 顶部：0； 到您的 TH（最好为它们创建 class）并删除表格的样式“溢出：隐藏；”。 这对我有用。

 @import "https://fonts.googleapis.com/css?family=Montserrat:300,400,700"; .rwd-table { margin: 1em 0; min-width: 300px; width: 100%; }.rwd-table.table_header{ overflow: hidden; position: relative; overflow-x: auto; }.rwd-table tr { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }.rwd-table th { display: none; }.rwd-table td { display: block; }.rwd-table td:first-child { padding-top: .5em; }.rwd-table td:last-child { padding-bottom: .5em; }.rwd-table td:before { content: attr(data-th) ": "; font-weight: bold; width: 6.5em; display: inline-block; } @media (min-width: 480px) {.rwd-table td:before { display: none; } }.rwd-table th, .rwd-table td { text-align: left; } @media (min-width: 480px) {.rwd-table th, .rwd-table td { display: table-cell; padding: .25em.5em; }.rwd-table th:first-child, .rwd-table td:first-child { padding-left: 0; }.rwd-table th:last-child, .rwd-table td:last-child { padding-right: 0; } } h1 { font-weight: normal; letter-spacing: -1px; color: #34495E; }.rwd-table { background: #34495E; color: #fff; border-radius: .4em; position: relative /*add this line*/ /*overflow: hidden;*/ /*The line above commented*/ }.rwd-table tr { border-color: #46637f; } /*Add the style in this block*/.rwd-table th { position: sticky; top: 0; background: black; /*The background-color is optional*/ } /*----------------------------*/.rwd-table th, .rwd-table td { margin: .5em 1em; } @media (min-width: 480px) {.rwd-table th, .rwd-table td { padding: 1em;important. } },rwd-table th. :rwd-table td:before { color; #dd5; }

 <div class="main_content"> <div class="header">Welcome., Have a nice day,</div> <div class="info"> <table class="rwd-table"> <thead> <tr class="table_header"> <th>Movie Title</th> <th>Genre</th> <th>Year</th> <th>Gross</th> </tr> </thead> <tbody> <tr> <td data-th="Movie Title">Star Wars</td> <td data-th="Genre">Adventure, Sci-fi</td> <td data-th="Year">1977</td> <td data-th="Gross">$460,935,665</td> </tr> <tr> <td data-th="Movie Title">Howard The Duck</td> <td data-th="Genre">"Comedy"</td> <td data-th="Year">1986</td> <td data-th="Gross">$16,295,774</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> <tr> <td data-th="Movie Title">American Graffiti</td> <td data-th="Genre">Comedy, Drama</td> <td data-th="Year">1973</td> <td data-th="Gross">$115,000,000</td> </tr> </tbody> </table> </div> </div>

OBS：将您的“TH”放在 thead 标签而不是 tbody 中。 它尊重语义标记。