我在頁面中有一個表格，我只需要為tbody表格的一部分實現(xiàn)垂直滾動。我的表具有動態(tài)寬度的列，如果列寬度的增加導(dǎo)致表溢出，則會實現(xiàn)水平滾動。我想要的是只有表格主體在垂直溢出時滾動，但希望表格標(biāo)題保持可見。我所實現(xiàn)的垂直滾動整個表格以下是我現(xiàn)在的代碼。它有虛擬數(shù)據(jù)，因為我無法發(fā)布實際代碼，但結(jié)構(gòu)是相同的（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>我已經(jīng)在 stackoverflow 上檢查了這個問題的多個解決方案，但它們都為其列設(shè)置了固定寬度，然后如果內(nèi)容超出寬度，則使用將內(nèi)容包裹在里面。具有固定 thead 和可滾動 tbody 的表 是唯一沒有完全搞亂我的頁面的解決方案，但不起作用，它為標(biāo)題和正文中的列提供了不同的列寬。所有其他解決方案，即使是使用嵌套表的解決方案也使用固定寬度列，以及那些不使用 js/jQuery 的解決方案，我寧愿不使用它們，除非它是絕對的、最后的選項。有人可以建議一下嗎？
3 回答
MYYA
TA貢獻1868條經(jīng)驗 獲得超4個贊
要使<tbody>可滾動：
tbody{
display: block;
height: 100px;
width: 100%;
overflow-y: scroll;
}
如果您希望<thead>在主體滾動時保持固定：
thead tr{
display: block
}
森欄
TA貢獻1810條經(jīng)驗 獲得超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設(shè)置為。theadtfootposition: sticky
關(guān)于這種方法的一些注意事項和需要理解的事情。
實際滾動的or
overflow元素是 的 div 容器table。您必須擁有這個，并且您可以使用它來控制table.?因此，滾動條將始終是可滾動的完整高度table。必須設(shè)置為不透明值，否則當(dāng)滾動時標(biāo)題經(jīng)過下方時，
background-color其中的行將顯示在標(biāo)題后面。tbody邊框/輪廓很難正確設(shè)置，但只要稍加技巧，您就可以找到兼容的樣式。
thead向或 中添加邊框或輪廓tfoot不會產(chǎn)生粘性。
.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>
最終結(jié)果將如下所示，所有列分別對齊......
https://i.stack.imgur.com/wSoQl.gif
另請參閱在元素上使用的此解決方案。display: gridtable
慕標(biāo)琳琳
TA貢獻1830條經(jīng)驗 獲得超9個贊
我不確定這是否能回答你的問題。
如果信息太多，y軸總是有滾動，x軸只有滾動
CSS
overflow-x:auto; overflow-y:scroll;
- 3 回答
- 0 關(guān)注
- 200 瀏覽
添加回答
舉報
0/150
提交
取消