15

看表。它有 3 个部分:

  • 列标题
  • 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%;}

编辑:我的表格需要垂直扩展,并且当页眉/页脚内的行溢出表格高度时,它需要显示滚动条。

4

5 回答 5

3

好吧,首先,我认为您想做的事情不可能按照您的方式进行。为什么要将页脚放在表格内?

您必须使用定位使页脚到达页面底部,但是:

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>元素不会对任何溢出做出反应。要绕过这一点,您可以将 a 的每个内容包装<td>到一个 div 中并设置一个溢出-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;
}

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

jsFiddle

希望这有帮助

于 2013-11-07T11:29:15.500 回答
1

这是我为另一篇文章制作的示例。我的桌子是完全可扩展的,你也可以看到卷轴。

    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/

于 2013-11-12T20:58:49.847 回答
0

这是在 Chrome 中似乎对我有用的东西。查看演示并更改输出窗口高度以查看滚动条出现。

我使用了CSS3 灵活框布局,这里的关键规则是article { -webkit-flex: 1 1 auto; }flex是一个速记规则,前两个1值用于flex-growflex-shrink允许<article>容器填充任何可用空间。overflow-y: auto;当内容的高度超过可用高度时,再加上会导致滚动条出现。

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

现在我确实认为创建没有<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>
于 2013-11-07T10:23:10.377 回答
0

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

以下解决方案可能对您有用。

用以下内容包装名为 div 的“表”标签:

.tableFooter { height:90px; overflow-x: hidden; overflow-y: auto; position: fixed; bottom: 0; width: 90%; /* 90 placed roughly */ }
于 2013-11-08T21:14:24.910 回答
0

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

.row{
    display:table-row;
    overflow-y: scroll;
}
于 2013-11-06T16:48:58.317 回答