具有100%宽度的HTML表，Tbody内有垂直滚动

Question

具有100%宽度的HTML表，Tbody内有垂直滚动

我该怎么做<table>100%宽度，只放在里面<tbody>垂直卷轴的高度？

vertical scroll inside tbody

table {

    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>

Answer 1

在下面的解决方案中，表占父容器的100%，不需要绝对大小。它是纯CSS，使用了Flex布局。情况如下：可能的缺点：无论是否需要垂直滚动条都是可见的；表格布局是固定的-列不根据内容宽度调整大小(您仍然可以显式地设置任何列宽)；有一个绝对大小-滚动条的宽度，对于我能够检查的浏览器大约是0.9em。HTML(简称)：<div&nbsp;class="table-container"> &nbsp;&nbsp;&nbsp;&nbsp;<table> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<thead> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<th>head1</th> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<th>head2</th> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<th>head3</th> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<th>head4</th> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</thead> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tbody> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>content1</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>content2</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>content3</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>content4</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>content1</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>content2</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>content3</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>content4</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tr> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tbody> &nbsp;&nbsp;&nbsp;&nbsp;</table></div>CSS，为了清晰起见，省略了一些装饰：.table-container&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;10em;}table&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;&nbsp;&nbsp;flex-flow:&nbsp;column; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%;}table&nbsp;thead&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;head&nbsp;takes&nbsp;the&nbsp;height&nbsp;it&nbsp;requires,&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;and&nbsp;it's&nbsp;not&nbsp;scaled&nbsp;when&nbsp;table&nbsp;is&nbsp;resized&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;flex:&nbsp;0&nbsp;0&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;calc(100%&nbsp;-&nbsp;0.9em);}table&nbsp;tbody&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;body&nbsp;takes&nbsp;all&nbsp;the&nbsp;remaining&nbsp;available&nbsp;space&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;flex:&nbsp;1&nbsp;1&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;&nbsp;&nbsp;overflow-y:&nbsp;scroll;}table&nbsp;tbody&nbsp;tr&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%;}table&nbsp;thead,&nbsp;table&nbsp;tbody&nbsp;tr&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;table; &nbsp;&nbsp;&nbsp;&nbsp;table-layout:&nbsp;fixed;}在jsfiddle上的完整代码相同的代码以较少的形式出现，因此您可以将其混入：.table-scrollable()&nbsp;{ &nbsp;&nbsp;@scrollbar-width:&nbsp;0.9em; &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;flex-flow:&nbsp;column; &nbsp;&nbsp;thead, &nbsp;&nbsp;tbody&nbsp;tr&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;table; &nbsp;&nbsp;&nbsp;&nbsp;table-layout:&nbsp;fixed; &nbsp;&nbsp;} &nbsp;&nbsp;thead&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;flex:&nbsp;0&nbsp;0&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;~"calc(100%&nbsp;-&nbsp;@{scrollbar-width})"; &nbsp;&nbsp;} &nbsp;&nbsp;tbody&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;&nbsp;&nbsp;flex:&nbsp;1&nbsp;1&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;overflow-y:&nbsp;scroll; &nbsp;&nbsp;&nbsp;&nbsp;tr&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}}