看桌子它有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%;}
解决方法
这是我为另一篇文章做的一个示例.我的桌子是完全可展开的,您也可以看到滚动条.
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"> </div> <div class="divcell cellwidth2"> </div> <div class="divcell cellwidth3"> </div> <div class="divcell cellwidth4"> </div> </div> <div class="divrow"> <div class="divcell cellwidth1"> </div> <div class="divcell cellwidth2"> </div> <div class="divcell cellwidth3"> </div> <div class="divcell cellwidth4"> </div> </div> <div class="divrow"> <div class="divcell cellwidth1"> </div> <div class="divcell cellwidth2"> </div> <div class="divcell cellwidth3"> </div> <div class="divcell cellwidth4"> </div> </div> <div class="divrow"> <div class="divcell cellwidth1"> </div> <div class="divcell cellwidth2"> </div> <div class="divcell cellwidth3"> </div> <div class="divcell cellwidth4"> </div> </div> <div class="divrow"> <div class="divcell cellwidth1"> </div> <div class="divcell cellwidth2"> </div> <div class="divcell cellwidth3"> </div> <div class="divcell cellwidth4"> </div> </div> <div class="divrow"> <div class="divcell cellwidth1"> </div> <div class="divcell cellwidth2"> </div> <div class="divcell cellwidth3"> </div> <div class="divcell cellwidth4"> </div> </div> <div class="divrow"> <div class="divcell cellwidth1"> </div> <div class="divcell cellwidth2"> </div> <div class="divcell cellwidth3"> </div> <div class="divcell cellwidth4"> </div> </div> <div class="divrow"> <div class="divcell cellwidth1"> </div> <div class="divcell cellwidth2"> </div> <div class="divcell cellwidth3"> </div> <div class="divcell cellwidth4"> </div> </div> <div class="divrow"> <div class="divcell cellwidth1"> </div> <div class="divcell cellwidth2"> </div> <div class="divcell cellwidth3"> </div> <div class="divcell cellwidth4"> </div> </div> <div class="divrow"> <div class="divcell cellwidth1"> </div> <div class="divcell cellwidth2"> </div> <div class="divcell cellwidth3"> </div> <div class="divcell cellwidth4"> </div> </div> <div class="divrow"> <div class="divcell cellwidth1"> </div> <div class="divcell cellwidth2"> </div> <div class="divcell cellwidth3"> </div> <div class="divcell cellwidth4"> </div> </div> <div class="divrow"> <div class="divcell cellwidth1"> </div> <div class="divcell cellwidth2"> </div> <div class="divcell cellwidth3"> </div> <div class="divcell cellwidth4"> </div> </div> <div class="divrow"> <div class="divcell cellwidth1"> </div> <div class="divcell cellwidth2"> </div> <div class="divcell cellwidth3"> </div> <div class="divcell cellwidth4"> </div> </div> <div class="divrow"> <div class="divcell cellwidth1"> </div> <div class="divcell cellwidth2"> </div> <div class="divcell cellwidth3"> </div> <div class="divcell cellwidth4"> </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>
原文地址:https://www.jb51.cc/html/230631.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。