表粘Header跳

Question

試圖弄清楚如何讓表格 header 在滾動數據時不要跳起來：

 tbody { overflow-y: scroll; } thead, tbody tr { display: table; width: 100%; table-layout: fixed; text-align: left; } thead, th { position: sticky; top: 0; z-index: 1; border-top: 0; border-bottom: 0; background-color: palegreen; }.outside-container { display: flex; height: 300px; }.inside-left { flex: 1; background-color: peachpuff; padding: 30px; }.inside-right { flex: 1; background-color: dodgerblue; }.table-container { height: 100%; border: 1px solid red; overflow-y: scroll; }

 <div class="outside-container"> <div class="inside-left"> <div class="table-container"> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> </tbody> </table> </div> </div> <div class="inside-right"></div> </div>

Answer 1

這是由於表格上的默認border-spacing ，它在容器頂部和<th>頂部之間增加了額外的空間。

 table { border-spacing: 0; width: 100%; table-layout: fixed; text-align: left; } tbody { overflow-y: scroll; } /* thead, tbody tr { display: table; width: 100%; table-layout: fixed; text-align: left; } */ thead, th { position: sticky; top: 0; z-index: 1; border-top: 0; border-bottom: 0; background-color: palegreen; }.outside-container { display: flex; height: 300px; }.inside-left { flex: 1; background-color: peachpuff; padding: 30px; }.inside-right { flex: 1; background-color: dodgerblue; }.table-container { height: 100%; border: 1px solid red; overflow-y: scroll; }

 <div class="outside-container"> <div class="inside-left"> <div class="table-container"> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> </tbody> </table> </div> </div> <div class="inside-right"></div> </div>

邊框間距 - CSS：級聯樣式表 | MDN

注意：您的表 header 在 Firefox 中對我來說不粘，但在 Chrome 和 Edge 中是粘的。 正如@myf 在評論中指出的那樣，這是由於在thead和tbody tr上設置了display:table 。 刪除該規則並將width 、 table-layout和text-align styles 移動到table ，反而會使 header 在 Firefox 中保持粘性。