具有100%寬度的HTML表，Tbody內(nèi)有垂直滾動(dòng)我該怎么做<table>100%寬度，只放在里面<tbody>垂直卷軸的高度？vertical scroll inside tbodytable { width: 100%; display:block;}thead { display: inline-block; width: 100%; height: 20px;}tbody { height: 200px; display: inline-block; width: 100%; overflow: auto;} <table> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> <th>Head 4</th> <th>Head 5</th> </tr> </thead> <tbody> <tr> <td>Content 1</td> <td>Content 2</td> <td>Content 3</td> <td>Content 4</td> <td>Content 5</td> </tr> </tbody></table>
3 回答
繁星淼淼
TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超11個(gè)贊
無(wú)論是否需要垂直滾動(dòng)條都是可見(jiàn)的； 表格布局是固定的-列不根據(jù)內(nèi)容寬度調(diào)整大小(您仍然可以顯式地設(shè)置任何列寬)； 有一個(gè)絕對(duì)大小-滾動(dòng)條的寬度，對(duì)于我能夠檢查的瀏覽器大約是0.9em。
<div class="table-container"> <table> <thead> <tr> <th>head1</th> <th>head2</th> <th>head3</th> <th>head4</th> </tr> </thead> <tbody> <tr> <td>content1</td> <td>content2</td> <td>content3</td> <td>content4</td> </tr> <tr> <td>content1</td> <td>content2</td> <td>content3</td> <td>content4</td> </tr> ... </tbody> </table></div>
.table-container {
height: 10em;}table {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;}table thead {
/* head takes the height it requires,
and it's not scaled when table is resized */
flex: 0 0 auto;
width: calc(100% - 0.9em);}table tbody {
/* body takes all the remaining available space */
flex: 1 1 auto;
display: block;
overflow-y: scroll;}table tbody tr {
width: 100%;}table thead, table tbody tr {
display: table;
table-layout: fixed;}.table-scrollable() {
@scrollbar-width: 0.9em;
display: flex;
flex-flow: column;
thead,
tbody tr {
display: table;
table-layout: fixed;
}
thead {
flex: 0 0 auto;
width: ~"calc(100% - @{scrollbar-width})";
}
tbody {
display: block;
flex: 1 1 auto;
overflow-y: scroll;
tr {
width: 100%;
}
}}添加回答
舉報(bào)
0/150
提交
取消