【发布时间】：2020-01-09 02:53:35
【问题描述】：
我很难调整表格页脚 (tfoot) 的高度。
@font-face {
font-family: Poppins;
src: url(./fonts/poppin/Poppins-Light.otf);
}
body{
font-family: Poppins,arial;
font-size: 14px;
line-height: 1.2em;
}
.dataview{
width: auto;
margin: 0 auto;
table-layout: fixed;
border-collapse: collapse;
border: 1px solid black;
}
.dataview thead{
background-color: cornflowerblue;
color: yellow;
font-weight: bold;
}
.dataview thead tr{
display: block;
position: relative;
}
.dataview tbody tr:nth-last-child(1){
border-bottom: none;
}
.dataview tbody{
display: block;
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
background-color: #f2f2f2;
}
.dataview th, .dataview td{
padding: 5px;
text-align: left;
}
.dataview th{
height: 30px;
}
.dataview tr{
border-bottom: 1px solid black
}
.dataview th.right, .dataview td.right{
text-align:right;
}
.dataview th.center, .dataview td.center{
text-align:center;
}
.dataview tbody tr:nth-child(even){
background-color: #ccd8ff;
}
.dataview tbody tr:hover td{
background-color: yellow;
}
.dataview tfoot td{
height: 20px;
background-color: tomato;
border-top: 1px solid black;
}
/* clidata-browse */
.dataview#clidata-browse{
width: auto;
box-sizing: border-box;
}
.dataview#clidata-browse td{
height: 45px;
}
.dataview#clidata-browse th:nth-child(1),
.dataview#clidata-browse td:nth-child(1){
min-width: 350px;
}
.dataview#clidata-browse th:nth-child(2),
.dataview#clidata-browse td:nth-child(2){
min-width: 350px;
}
.dataview#clidata-browse th:nth-child(3),
.dataview#clidata-browse td:nth-child(3){
min-width: 100px;
padding-right:10px;
}
.dataview#clidata-browse tbody{
height: 380px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Arrowleaf Sandbox</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table class="dataview" id="clidata-browse">
<thead>
<tr>
<th>Customer Name</th>
<th>Email Address</th>
<th class="right">Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Customer 1<br>
Customer Address
</td>
<td>testcust1@gmail.com</td>
<td class="right">$3000.00</td>
</tr>
<tr>
<td>
Customer 2<br>
Customer Address
</td>
<td>testcust2@gmail.com</td>
<td class="right">$40.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>This is a test</td>
</tr>
</tfoot>
</table>
</body>
</html>尝试调整 css 中 tfoot 标签的高度（包含在 fiddle 中）。我可以毫无问题地增加行高，但如果我希望 tfoot 小于 tbody 行的大小，它不会变小。任何帮助表示赞赏。
【问题讨论】：
-
使用最大高度代替高度，一旦达到最大高度就会滚动jsfiddle.net/5naxopjd
-
@SunnyPatel 一个小时前我提出了这个问题，我急于选择答案吗？
-
@SunnyPatel，你做到了！非常好！谢谢。