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

Question

具有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>

Answer 1

在下面的解决方案中，表占父容器的100%，不需要绝对大小。它是纯CSS，使用了Flex布局。

情况如下：

可能的缺点：

• 无论是否需要垂直滚动条都是可见的；
• 表格布局是固定的-列不根据内容宽度调整大小(您仍然可以显式地设置任何列宽)；
• 有一个绝对大小-滚动条的宽度，对于我能够检查的浏览器大约是0.9em。

HTML(简称)：

<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>

CSS，为了清晰起见，省略了一些装饰：

.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;}

在jsfiddle上的完整代码

相同的代码以较少的形式出现，因此您可以将其混入：

.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%;
    }
  }}