我在頁面中有一個表格，我只需要為tbody表格的一部分實現垂直滾動。我的表具有動態寬度的列，如果列寬度的增加導致表溢出，則會實現水平滾動。我想要的是只有表格主體在垂直溢出時滾動，但希望表格標題保持可見。我所實現的垂直滾動整個表格以下是我現在的代碼。它有虛擬數據，因為我無法發布實際代碼，但結構是相同的（jsfiddle 鏈接）：th,td { text-align: left; padding: 5px; outline: solid 0.5px;}table { table-layout: auto; width: 100%; white-space: nowrap; overflow-x: scroll; overflow-y: scroll; height: 100px; display: block;}.container { width: 300px;}<div class="container"> <table> <thead> <tr> <th>Title 1</th> <th>Name</th> <th>Address</th> <th>Col4</th> <th>Col5</th> <th>Col6</th> </tr> </thead> <tbody> <tr> <td>Title 2</td> <td>Jane Doe</td> <td>dfss</td> <td>sdffsffsfd</td> <td>sfsfs</td> <td>sfsff</td> </tr> <tr> <td>Title 3</td> <td>John Doe</td> <td>sasas</td> <td>eeeee</td> <td>eEe</td> <td>sfff</td> </tr> <tr> <td>Title 4 is a long title</td> <td>Name1</td> <td>dfss</td> <td>sdffsffsfd</td> <td>sfsfs</td> <td>sfsff</td> </tr> <tr> <td>Title 5 is shorter</td> <td>Name 2</td> <td>dfsf</td> <td>sdfsf</td> <td>dfsf</td> <td>sdfsf</td> </tr> <tr> <td>Title 6</td> <td>Name 3</td> <td>sasas</td> <td>eeeee</td> <td>eEe</td> <td>sfff</td> </tr> </tbody> </table></div>我已經在 stackoverflow 上檢查了這個問題的多個解決方案，但它們都為其列設置了固定寬度，然后如果內容超出寬度，則使用將內容包裹在里面。具有固定 thead 和可滾動 tbody 的表 是唯一沒有完全搞亂我的頁面的解決方案，但不起作用，它為標題和正文中的列提供了不同的列寬。所有其他解決方案，即使是使用嵌套表的解決方案也使用固定寬度列，以及那些不使用 js/jQuery 的解決方案，我寧愿不使用它們，除非它是絕對的、最后的選項。有人可以建議一下嗎？
3 回答
MYYA
TA貢獻1868條經驗 獲得超4個贊
要使<tbody>可滾動：
tbody{
display: block;
height: 100px;
width: 100%;
overflow-y: scroll;
}
如果您希望<thead>在主體滾動時保持固定：
thead tr{
display: block
}
森欄
TA貢獻1810條經驗 獲得超5個贊
簡單的非理想解決方案（Abe）
Abe 的解決方案的問題在于，在您開始使用thead和之前它都可以正常工作tfoot。添加這些后，您很快就會意識到表格列布局不再同步tbody、thead和之間的列寬tfoot。請參閱下面的演示...
th,
td {
? text-align: left;
? padding: 5px;
? outline: solid 0.5px;
}
table {
? white-space: nowrap;
? display: block;
}
tbody{
? display: block;
? height: 100px;
? overflow-y: auto;
}
<div class="container">
? <table>
? ? <thead>
? ? ? <tr>
? ? ? ? <th>Title 1</th>
? ? ? ? <th>Name</th>
? ? ? ? <th>Address</th>
? ? ? ? <th>Col4</th>
? ? ? ? <th>Col5</th>
? ? ? ? <th>Col6</th>
? ? ? </tr>
? ? </thead>
? ? <tbody>
? ? ? <tr>
? ? ? ? <td>Title 2</td>
? ? ? ? <td>Jane Doe</td>
? ? ? ? <td>dfss</td>
? ? ? ? <td>sdffsffsfd</td>
? ? ? ? <td>sfsfs</td>
? ? ? ? <td>sfsff</td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>Title 3</td>
? ? ? ? <td>John Doe</td>
? ? ? ? <td>sasas</td>
? ? ? ? <td>eeeee</td>
? ? ? ? <td>eEe</td>
? ? ? ? <td>sfff</td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>Title 4 is a long title</td>
? ? ? ? <td>Name1</td>
? ? ? ? <td>dfss</td>
? ? ? ? <td>sdffsffsfd</td>
? ? ? ? <td>sfsfs</td>
? ? ? ? <td>sfsff</td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>Title 5 is shorter</td>
? ? ? ? <td>Name 2</td>
? ? ? ? <td>dfsf</td>
? ? ? ? <td>sdfsf</td>
? ? ? ? <td>dfsf</td>
? ? ? ? <td>sdfsf</td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>Title 6</td>
? ? ? ? <td>Name 3</td>
? ? ? ? <td>sasas</td>
? ? ? ? <td>eeeee</td>
? ? ? ? <td>eEe</td>
? ? ? ? <td>sfff</td>
? ? ? </tr>
? ? </tbody>
? ? <tfoot>
? ? ? <tr>
? ? ? ? <th>Title 1</th>
? ? ? ? <th>Name</th>
? ? ? ? <th>Address</th>
? ? ? ? <th>Col4</th>
? ? ? ? <th>Col5</th>
? ? ? ? <th>Col6</th>
? ? ? </tr>
? ? </tfoot>
? </table>
</div>
稍微理想的解決方案
維護表格布局的更好解決方案是將和auto設置為。theadtfootposition: sticky
關于這種方法的一些注意事項和需要理解的事情。
實際滾動的or
overflow元素是 的 div 容器table。您必須擁有這個，并且您可以使用它來控制table.?因此，滾動條將始終是可滾動的完整高度table。必須設置為不透明值，否則當滾動時標題經過下方時，
background-color其中的行將顯示在標題后面。tbody邊框/輪廓很難正確設置，但只要稍加技巧，您就可以找到兼容的樣式。
thead向或 中添加邊框或輪廓tfoot不會產生粘性。
.container {
? height: 140px;
? min-height: 100px;
? overflow: auto;
? resize: vertical; /* only for demo */
}
thead,
tfoot {
? /* must background-color otherwise transparent will show rows underneath */
? background-color: white;
? position: sticky;
}
thead {
? margin-bottom: 0;
? top: 0;
}
tfoot {
? margin-top: 0;
? bottom: 0;
}
th,
td {
? text-align: left;
? padding: 5px;
? outline: solid black 0.5px;
}
table {
? width: 100%;
}
<div class="container">
? <table>
? ? <thead>
? ? ? <tr>
? ? ? ? <th>Title 1</th>
? ? ? ? <th>Name</th>
? ? ? ? <th>Address</th>
? ? ? ? <th>Col4</th>
? ? ? ? <th>Col5</th>
? ? ? ? <th>Col6</th>
? ? ? </tr>
? ? </thead>
? ? <tbody>
? ? ? <tr>
? ? ? ? <td>Title 2</td>
? ? ? ? <td>Jane Doe</td>
? ? ? ? <td>dfss</td>
? ? ? ? <td>sdffsffsfd</td>
? ? ? ? <td>sfsfs</td>
? ? ? ? <td>sfsff</td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>Title 3</td>
? ? ? ? <td>John Doe</td>
? ? ? ? <td>sasas</td>
? ? ? ? <td>eeeee</td>
? ? ? ? <td>eEe</td>
? ? ? ? <td>sfff</td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>Title 4 is a long title</td>
? ? ? ? <td>Name1</td>
? ? ? ? <td>dfss</td>
? ? ? ? <td>sdffsffsfd</td>
? ? ? ? <td>sfsfs</td>
? ? ? ? <td>sfsff</td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>Title 5 is shorter</td>
? ? ? ? <td>Name 2</td>
? ? ? ? <td>dfsf</td>
? ? ? ? <td>sdfsf</td>
? ? ? ? <td>dfsf</td>
? ? ? ? <td>sdfsf</td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>Title 6</td>
? ? ? ? <td>Name 3</td>
? ? ? ? <td>sasas</td>
? ? ? ? <td>eeeee</td>
? ? ? ? <td>eEe</td>
? ? ? ? <td>sfff</td>
? ? ? </tr>
? ? </tbody>
? ? <tfoot>
? ? ? <tr>
? ? ? ? <th>Title 1</th>
? ? ? ? <th>Name</th>
? ? ? ? <th>Address</th>
? ? ? ? <th>Col4</th>
? ? ? ? <th>Col5</th>
? ? ? ? <th>Col6</th>
? ? ? </tr>
? ? </tfoot>
? </table>
</div>
最終結果將如下所示，所有列分別對齊......
https://i.stack.imgur.com/wSoQl.gif
另請參閱在元素上使用的此解決方案。display: gridtable
- 3 回答
- 0 關注
- 189 瀏覽
添加回答
舉報
0/150
提交
取消