Jen*_*nny 14 html css html5 css3
看看桌子.它有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%;}
编辑:我的表需要可垂直扩展,当页眉/页脚内的行溢出表高度时,需要显示滚动条.
小智 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"> </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>
http://jsfiddle.net/Gabriel_Mendez/T2pmq/
| 归档时间： |
|
| 查看次数： |
16230 次 |
| 最近记录： |