【发布时间】：2013-11-18 00:30:32
【问题描述】：
看看桌子。它有 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%;}
编辑：我的表格需要垂直展开，并且当页眉/页脚内的行超出表格高度时，它需要显示滚动条。
【问题讨论】：
-
这里有一个jsfiddle.net/Zpr2r 供您提出问题。我无法理解您的高度调整要求，您能进一步解释一下吗？也许是一个例子？
-
您可以在页脚使用
position: fixed。从语义上讲，您不应该使用<div>s。我们是否变得如此害怕<table>s，以至于我们甚至不会在适当的时候使用它们？ -
是的，
<div class="table">和.table { display:table }而不仅仅是<table>真的应该被关注 -
@TreeTree：好的，让我试着澄清一下：我的表格需要垂直扩展，并且当页眉/页脚内的行溢出表格高度时，它需要显示滚动条。谢谢。