具有100%宽度的HTML表，Tbody内有垂直滚动我该怎么做<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贡献1775条经验 获得超11个赞
无论是否需要垂直滚动条都是可见的； 表格布局是固定的-列不根据内容宽度调整大小(您仍然可以显式地设置任何列宽)； 有一个绝对大小-滚动条的宽度，对于我能够检查的浏览器大约是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%;
}
}}- 3 回答
- 0 关注
- 912 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消