Question

看看桌子。它有3个部分：

列标题
包含值
一个页脚

我试图将页脚粘贴在页面底部。表高度需要调整大小，如果值超过表高度限制的行，我需要放置一个垂直滚动条。我不想扩展值的行高。有没有办法做到这一点？（只有html / css）。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div class="table">
        <div class="row headers">
            <div class="cell col1">Col1</div>
            <div class="cell col2">Col2</div>
            <div class="cell col3">Col3</div>
        </div>
        <div class="row">
            <div class="cell col1">1</div>
            <div class="cell col2">2</div>
            <div class="cell col3">3</div>
        </div>
        <div class="row">
            <div class="cell col1">1</div>
            <div class="cell col2">2</div>
            <div class="cell col3">3</div>
        </div>
        <div class="row">
            <div class="cell col1">1</div>
            <div class="cell col2">2</div>
            <div class="cell col3">3</div>
        </div>
        <div class="row footers">
            <div class="cell col1">Footer</div>
            <div class="cell col2"></div>
            <div class="cell col3"></div>
        </div>
    </div>

</body>

</html>

样式：

.table{
    display:table;
    width: 100%;
    border: 1px solid #000;
    background: #eee;
}
.row{
    display:table-row;
}
.headers { color: #505; font-weight: bold;}
.footers { color: #055;}
.cell{
    background: #eee;
    display:table-cell;
    border: 1px solid #fff;
}

.col1 { width:50%;}
.col2 { width:25%;}
.col3 { width:25%;}

编辑：我的表格需要垂直展开，当页眉/页脚中的行溢出表格高度时，需要显示滚动条。

Answer 1

首先，我不认为你想做的事情可能就像你做的那样。为什么要在页面内放置页脚？

您必须使用定位将页脚放到页面底部，但是：

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

来源：http://www.w3.org/TR/CSS2/visuren.html#propdef-position

我能想到的唯一解决方案是为页脚创建第二个表。为了使自己不那么复杂，你建议只使用<table>元素。

<table>
    <theader>
        <tr>
            <th class="col1">Col1</th>
            <th class="col2">Col2</th>
            <th class="col3">Col3</th>
        </tr>
    </theader>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </tbody>
</table>

<table id="footer">
    <tr>
        <td class="col1">
            Footer
        </td>
        <td class="col2">
        </td>
        <td class="col3">
        </td>
    </tr>
</table>

现在你可以将绝对位置放在页脚表中：

#footer
{
    width: 100%;
    position: absolute;
    bottom: 0;
}

因此，我们面临的下一个问题是<td>元素不会对任何溢出做出反应。要绕过这个，您可以将<td>的每个内容都包装到div中并设置overflow-y：

<td>
     <div>
          12312321312312312312312313123123123123345 long content as example
    </div>
 </td>

现在我们还应该为div设置一个静态高度：

td > div, th > div
{
    height: 22px;
    overflow-y: scroll;
}

还要确保td内容中断到y轴：

td, th
{
    border: 1px solid #fff;
    background: #eee;
    word-break: break-all;
}

现在，当您将每个内容包装到<div>时，它应该可以正常工作，与页脚表相同。

<强> jsFiddle

希望这是有帮助的

Answer 2

以下是我为另一篇文章撰写的示例。我的桌子是完全可扩展的，你也可以看到卷轴。

    html, body, #expandtable, #tablecontainer 
    {
        height:100%;
        margin: 0;
        padding: 0;
        border: none;
        overflow-y: hidden;
    }

    #tablecontainer 
    {
        width: 100%;
        margin: 0 auto;
        padding-top: 50px;
        max-width: 900px;
    }

    #expandtable
    {
        margin: 5px 0 0 0px;
        overflow-x: hidden;
        overflow-y: scroll;
        height: 60%;
        border-bottom: 0;
        background-color: #eee;
        margin: 0 auto;
    }

    .breakline { clear:both;}

    .divrow
    {

    }

    .divcell { float:left; border: 1px solid #999; box-sizing: border-box; min-height: 30px; }
    .colname { float:left; border: 1px solid #e5e5e5; box-sizing: border-box;}

    .cellwidth1 { width:10%; }
    .cellwidth2 { width:45%; }
    .cellwidth3 { width:35%; }
    .cellwidth4 { width:10%; }

<div id="tablecontainer">

    <div id="topbar">
        <div class="colname cellwidth1">ABC</div>
        <div class="colname cellwidth2">ABC</div>
        <div class="colname cellwidth3">ABC</div>
        <div class="colname cellwidth4">ABC</div>
    </div>
    <div class="breakline"></div>
    <div id="expandtable">
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
        <div class="divrow">
            <div class="divcell cellwidth1">&nbsp;</div>
            <div class="divcell cellwidth2">&nbsp;</div>
            <div class="divcell cellwidth3">&nbsp;</div>
            <div class="divcell cellwidth4">&nbsp;</div>
        </div>
    </div>
    <div class="breakline"></div>
    <div id="topbar">
        <div class="colname cellwidth1">ABC</div>
        <div class="colname cellwidth2">ABC</div>
        <div class="colname cellwidth3">ABC</div>
        <div class="colname cellwidth4">ABC</div>
    </div>
</div>

http://jsfiddle.net/Gabriel_Mendez/T2pmq/

Answer 3

您是否尝试过像这样添加overflow-y:scroll;：

.row{
    display:table-row;
    overflow-y: scroll;
}

Answer 4

这似乎在Chrome中对我有用。 See demo并更改输出窗口高度以查看滚动条。

我使用了CSS3 Flexible Box Layout，此处的关键规则是article { -webkit-flex: 1 1 auto; }。 flex是一种速记规则，flex-grow和flex-shrink的前两个1值允许<article>容器填满任何可用空间。结合overflow-y: auto;，当内容的高度超过可用高度时，会出现滚动条。

MDN的Using CSS flexible boxes也是对这些属性的一个很好的总结。

现在我认为创建没有<table>标签的表格有点不对劲，但我无法做出其他有用的工作。

注意：抱歉，这不是跨浏览器演示。我没有安装所有最新的其他浏览器。如果我以后有时间，我会尝试更新CSS。

<强> CSS

html, body {
    height:100%;
}
.flex {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    height: 100%;
    width: 80%; /* artificial limitation showing scroll on the edge of the "table" */
    overflow: hidden;
}

header, article, footer {
    min-height:24px;
}

header {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    color: #505;
    font-weight: bold;
}
article {
    -webkit-flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
}
footer {
    display: -webkit-box;
    color: #055;
}
.row {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    max-height:24px;
}
header > div, article > div, footer > div {
    background: #eee;
    border: 1px solid #fff;
}
header > :first-child, .row > :first-child, footer > :first-child {
    width:50%;
}
header > :nth-child(2), .row > :nth-child(2), footer > :nth-child(2) {
    width:25%;
}
header > :last-child, .row > :last-child, footer > :last-child {
    width:25%;
}

<强> HTML

<section class="flex">
    <header>
        <div>Col1</div>
        <div>Col2</div>
        <div>Col3</div>
    </header>
    <article>
        <div class="row">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <div class="row">
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
        <div class="row">
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
        <!-- more rows here, removed for brevity -->
    </article>
    <footer>
        <div>Footer</div>
        <div></div>
        <div></div>
    </footer>
</section>

Answer 5

据我所知，当表格行增加并且表格需要固定在底部时，您需要垂直滚动。

以下解决方案可能适合您。

用“

”包装名为div标签的“表格”

.tableFooter { height:90px; overflow-x: hidden; overflow-y: auto; position: fixed; bottom: 0; width: 90%; /* 90 placed roughly */ }

在页面底部粘贴HTML 5表格页脚

5 个答案: