Question

如何在内容中包含标题/内容/页脚，或者是应该修复它的那个表（不是滚动）并且它的tbody应该是可滚动的？

由于这个帖子http://fiddle.jshell.net/nacho4d/ddv7ytkf/11/的帮助，我有灵活方框的页眉/内容/页脚结构，但不能很好地嵌入表格。我正在尝试this jsfiddle但到目前为止无法适应我的情况。

这是我到目前为止，没有运气:( http://fiddle.jshell.net/nacho4d/ddv7ytkf/17/

<div id="main">
    <div style="background-color:lightblue;" class="header">Header - height is variable but just a couple of lines at maximum. Should not overflow
    </div>

    <div style="background-color:khaki;" class="content">
        <table>
        <thead>
            <tr><td>Name</td><td>phone</td></tr>
        </thead>
        <tbody>
            <tr><td>AAAA</td><td>323232</td></tr>
            <tr><td>BBBBB</td><td>323232</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>AAAA</td><td>323232</td></tr>
            <tr><td>BBBBB</td><td>323232</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>AAAA</td><td>323232</td></tr>
            <tr><td>BBBBB</td><td>323232</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>BBBBB</td><td>323232</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>AAAA</td><td>323232</td></tr>
            <tr><td>BBBBB</td><td>323232</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
            <tr><td>CCCCC</td><td>3435656</td></tr>
        </tbody>
        </table>
    </div>

    <div style="background-color:pink;" class="footer">Footer
    </div>
</div>

和css：

#main {
    width: 400px;
    height: 250px;
    border: 1px solid #c3c3c3;

    display: flex;
    display: -webkit-flex;

    -webkit-justify-content: space-between;
    justify-content: space-between;

    -webkit-flex-direction: column;
    flex-direction: column;
}
.header,
.footer {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
.content {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow:auto
}

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    /*height:50px;*/
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
thead {
    width: 100%;
}
table {
    width:100%;
}

编辑我应该更改我的HTML吗？

Answer 1

您可以将表格封装在一个部分中并填充顶部和底部（页眉和页脚的空间）

section {
  position: relative;
  padding-top: 37px;
  padding-bottom: 37px;
}

并修复页眉和页脚的位置（绝对值）。

th div{
  position: absolute;
  top: 0;
}
tfoot tr td div {
  position: absolute;
  bottom: 0;
}

在这里，检查一下： https://jsfiddle.net/byB9d/6857/

Answer 2

我分成两个表

也许这可以帮到你：

http://fiddle.jshell.net/ddv7ytkf/20/

Answer 3

首先，您可以按照以下方式定位标题，内容和页脚。

HTML

<div id="main">
    <div id="header">
        Header
    </div>
    <div id="content">
    </div>
</div>
<div id="footer">
    Footer
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
}
#main {
    min-height: 100%;
    margin-bottom: -50px;
}
#header {
    height: 50px;
    background-color: gray;
}
#footer {
    height: 50px;
    background-color: gray;
}

现在，您可以将表格添加到内容div中。

<table id="table">
    <thead>
        <tr>
            <td width="50%">Name</td>
            <td width="50%">Phone</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>AAA</td>
            <td>xxx-xxx-xxxx</td>
        </tr>
        <tr>
            <td>BBB</td>
            <td>xxx-xxx-xxxx</td>
        </tr>
        <tr>
            <td>CCC</td>
            <td>xxx-xxx-xxxx</td>
        </tr>
    </tbody>
</table>

要获得所需的滚动条，您需要按如下方式对齐CSS。

table {
    margin-top: 10px;
    width: 200px;
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}
tbody {
    display: block;
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
thead {
    width: calc(100% - 1em);
    background-color: lightblue;
}

这里的关键点是：

让你的tbody显示：阻止，以便你可以添加滚动。然后添加overflow-y：滚动以使其垂直滚动。您还可以添加overflow-x：hidden来隐藏水平滚动。
添加display：table和table-layout：固定在你的thead和tbody里面的所有tr。这可以使您的表作为一个包含tbody的表来运行。
调整thead的宽度，使其保持列对齐。

很抱歉答案很长，但我想清楚地解释一切。

Here is a JSFiddle

div头/表/ div页脚结构，头部固定？

3 个答案: