Question

我有一个容器div，有一定的大小。让我们说它位于页面的中心，占据页面宽度和高度的70％。我想要一张包含以下属性的表格：

表格总是占据容器宽度的100％。
当行数很少时，表格的高度与表格行所需的一样小。
当容器div中的行数多于适合容器div时，表体变得可滚动，因此表格不会扩展到容器大小。

到目前为止，我已经弄明白了如何使桌面可滚动。但这是我的问题：如果我将表格大小设置为100％，即使有很多行，它也只占用最小的空间（仅显示一行）。它具有固定的尺寸，但在这种情况下，这不是一个可行的解决方案。如果有太多行，我怎么能让表滚动，否则显示所有行？另外，在这种情况下如何缩放标题？标题必须根据是否显示滚动条而不同地缩放，因为只有正文可滚动。

编辑：这是我的css表：

.report {
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

.report tbody tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.report thead tr{
    display: table;
    table-layout: fixed;
    width: calc( 100% - 2vw);
}

.report tbody {
    max-height: 100%;
    overflow-y: scroll;
    display: block;
}

EDIT2：是否可以将最后一个表格单元格扩展到空白区域？因此，在以下方案中，将header3展开到标有X？

的空间

---------------------------------------
| header1  |  header2  | header3  | X |
---------------------------------------
| content1 | content2  | content3 | ^ |
---------------------------------------
| content1 | content2  | content3 || ||
---------------------------------------
| content1 | content2  | content3 | v |
---------------------------------------

Html表 - 自适应大小

0 个答案: