看表。它有 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%;}
编辑:我的表格需要垂直扩展,并且当页眉/页脚内的行溢出表格高度时,它需要显示滚动条。