Fatal编程技术网
  • html/
  • 将HTML5表尾粘贴在页面底部

将HTML5表尾粘贴在页面底部

html css

将HTML5表尾粘贴在页面底部,html,css,Html,Css,看这张桌子。它有3个部分： 列标题 带值的3行 一英尺 我想把页脚贴在这页的底部。表格高度需要调整大小，如果值超过表格高度限制，我需要放置一个垂直滚动条。我不想扩展值的行高。有办法吗？（仅限html/css） 编辑：我的表格需要垂直扩展，当页眉/页脚内的行超出表格高度时，它需要显示一个滚动条。是否尝试添加overflow-y:scroll如下所示： .row{ display:table-row; overflow-y: scroll; } 在Chrome中，这里有一些似乎

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

  • 列标题
  • 带值的3行
  • 一英尺
我想把页脚贴在这页的底部。表格高度需要调整大小，如果值超过表格高度限制，我需要放置一个垂直滚动条。我不想扩展值的行高。有办法吗？（仅限html/css）

编辑：我的表格需要垂直扩展，当页眉/页脚内的行超出表格高度时，它需要显示一个滚动条。

是否尝试添加
overflow-y:scroll如下所示：


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



在Chrome中，这里有一些似乎对我有用的东西。并更改输出窗口的高度以查看滚动条的显示

我使用了，这里的关键规则是
文章{-webkitflex:11 auto；}
。是一个速记规则，前两个
1
值和允许
也是对这些属性的一个很好的总结

现在，我确实认为创建没有
标记的表有点错误，但我不能让其他任何东西起作用

注意：抱歉，这不是一个跨浏览器的演示。我没有安装所有最新的其他浏览器。如果我以后有时间，我会尝试更新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>




可乐
可乐
可乐
1.
2.
3.
4.
5.
6.
7.
8.
9
页脚

首先，我认为你想做的事情不可能像你这样做。为什么要将页脚放在表中

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


未定义“位置：相对”对表格行组、表格页眉组、表格页脚组、表格行、表格列组、表格列、表格单元格和表格标题元素的影响。

资料来源：

我能想到的唯一解决方案是为页脚创建第二个表。为了减少您自己的复杂性，您建议只使用
元素


<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>




所以我们面临的下一个问题是
元素对任何溢出都没有反应。要绕过此操作，您可以将
的每个内容包装到一个div中，并设置一个overflow-y：


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


同时确保td内容断开到y轴：


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


现在，当您将每个内容包装到
中时，它应该可以工作，页脚表也是如此




希望这是有帮助的
我知道当表格行增加，表格需要固定在底部时，您需要一个垂直滚动

以下解决方案可能适合您

将名为div的“表”标记包装为：


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



这是我为另一篇文章制作的一个样本。我的桌子可以完全展开，你也可以看到卷轴


    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>



html，body，#expandtable，#tablecontainer
{
身高：100%；
保证金：0；
填充：0；
边界：无；
溢出y：隐藏；
}
#餐具柜
{
宽度：100%；
保证金：0自动；
填充顶部：50px；
最大宽度：900px；
}
#可扩展
{
保证金：5px00px；
溢出x：隐藏；
溢出y：滚动；
身高：60%；
边界底部：0；
背景色：#eee；
保证金：0自动；
}
.特征线{清除：两者；}
迪夫罗先生
{
}
.divcell{float:左；边框：1px实心#999；框大小：边框框；最小高度：30px；}
.colname{float:left；border:1px solid#e5；框大小：border-box；}
.cellwidth1{宽度：10%；}
.cellwidth2{width:45%；}
.cellwidth3{宽度：35%；}
.cellwidth4{宽度：10%；}
基础知识
基础知识
基础知识
基础知识
基础知识
基础知识
基础知识
基础知识



这里有一个问题需要你回答。我很难理解你的身高调整要求，你能进一步解释吗？例如，您可以在页脚上使用
position:fixed
。从语义上讲，您不应该使用
s。我们是否变得如此害怕
s以至于在合适的时候我们甚至不使用它们？是的，应该真正查看
和
.table{display:table}
而不是
at@TreeTree：好的，让我澄清一下：我的桌子需要垂直扩展，当页眉/页脚内的行超出表格高度时，它需要显示一个滚动条。谢谢

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



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



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



    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>