提问人：kkkkk 提问时间：1/21/2016 最后编辑：Jan Żankowskikkkkk 更新时间：3/12/2021 访问量：6718
HTML表格：如何使所有行的高度相等？
HTML table: how to make all rows equal height?
问：
我正在用 HTML 生成一个表格。我有许多行，其计数保存在变量中{{ items|length }}
如何使除标题行之外的所有行的高度相同？
我试过了：
<style>
table.equalDivide th { width:100 / {{ items|length }} %; }
</style>
但这行不通。
所有行的高度都应为最高行的高度（下图中的 12：00 - 14：00）。
答：
1赞
James J. Hill
1/21/2016
#1
编辑：我认为你想要发生的事情已经正常发生。我创建了一个 JSFiddle，它显示了一个大单元格如何强制同一行中的其他单元格具有其高度。我很好奇你是否还有其他事情发生。对不起，如果我误会了你。
只需将高度应用于所有 tr。如果您希望高度取决于行数，只需相应地更改 css 规则即可。
HTML格式：
<table>
<tbody>
<th>Title</th>
<tr><td>Foo</td></tr>
<tr><td>Bar</td></tr>
<tr><td>Baz</td></tr>
</tbody>
</table>
CSS系统：
tr {
height: 50px;
}
评论
0赞
kkkkk
1/21/2016
是的，我可以这样做，但我不知道每行会有多少文本，我希望所有单元格都有这个较大的单元格的高度
1赞
Tony Duffill
1/21/2016
#2
我不知道用CSS可以做到这一点。
你所能做的（我认为）就是在你的 onload（） 函数中通过遍历表行来获得最大的行高 （table.rows[..].offsetHeight（我希望这是对的 - 如果不是，请尝试最大单元格高度），然后将表中每行的高度设置为该值。
1赞
Tony Duffill
1/24/2016
#3
这很简单，我能得到它 - 但它有效......
使用记事本或类似工具（推荐使用 Notepad++）编辑 HTML 文件，如下所示： （注意：语法至关重要 - 严格遵循它 - 尤其是单引号或双引号）
1：为您的表提供一个唯一的 ID：table id=“myTable” ...
2：给你的 body 元素一个 onload 函数：body onload=“resizeTable（'myTable'）;” ...
3：在您的头部部分添加以下内容：
<script type="text/javascript">
function resizeTable(tableID)
{
var tbl=document.getElementById(tableID), biggestRow=0, rowHeight=0, row=0;
for (row=0; row < tbl.rows.length; row++) { //find biggest row height
rowHeight=parseInt(tbl.rows[row].offsetHeight);
if (rowHeight > biggestRow) {biggestRow=rowHeight;}
}
for (row=0; row < tbl.rows.length; row++) { //set all rows to biggest row height
tbl.rows[row].style.height=biggestRow + "px";
}
}
</script>
评论