div header/table/div footer 结构与头部固定？

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: scroll 使其垂直滚动。您也可以添加overflow-x: hidden 来隐藏水平滚动。
• 添加显示：表格和表格布局：固定到您的thead 和tbody 内的所有tr。这使您的表格可以作为一个包含 tbody 的表格。
• 调整标题的宽度，使其保持列对齐。

对不起，回答太长了，但我想清楚地解释一切。

Here is a JSFiddle