Html 如何让表格单元格具有相同的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15397966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get table cells to have equal height
提问by Thomas Lai
How do I get table cells to be the same height? Check out http://thomaswd.com/organizer/dashboardand click on calendar. You will see that the table cells have different heights. I have 2 rows on the top of the table that is fixed height, and my table height is 100%. I don't want a specified pixel height, because that will not work when the browser is resized. How do I do this?
如何使表格单元格具有相同的高度？查看http://thomaswd.com/organizer/dashboard并单击日历。您将看到表格单元格具有不同的高度。我的桌子顶部有 2 行是固定高度，我的桌子高度是 100%。我不想要指定的像素高度，因为在调整浏览器大小时这将不起作用。我该怎么做呢？
采纳答案by Jesus Noland
To get the table cells to have equal height I used Google Chrome and inspected one of the days on the calendar by right-clicking on the day and selecting 'Inspect Element'. Then I changed the styling of 'calendar-day' like so:
为了使表格单元格具有相同的高度，我使用了谷歌浏览器并通过右键单击日期并选择“检查元素”来检查日历上的某一天。然后我改变了“日历日”的样式，如下所示：
/* shared */
td.calendar-day, td.calendar-day-np {
border-bottom:1px solid #999;
border-right:1px solid #999;
height: 10%;
}
Just specify in style.css what you would like the height to be.
只需在 style.css 中指定您想要的高度。
回答by sanon
Looks like what you want is for the tallest cell's height to propagate across the row.
看起来您想要的是最高单元格的高度在行中传播。
You can do this with javascript:
你可以用 javascript 做到这一点：
var eq_el_height = function(els, min_or_max) {
els.each(function() {
$(this).height('auto');
});
var m = $(els[0]).height();
els.each(function() {
var h = $(this).height();
if (min_or_max === "max") {
m = h > m ? h : m;
} else {
m = h < m ? h : m;
}
});
els.each(function() {
$(this).height(m);
});
};
Pass your table cells into the function like this:
将表格单元格传递给函数，如下所示：
$(#fixedheight tr').each(function(){
eq_el_height($(this).find('td'), "max");
});
回答by Erick Langford Xenes
Another solution could be:
另一种解决方案可能是：
var maxHeight = null;
$('#tableId tr').each(function() {
var thisHeight = $(this).height();
if(maxHeight == null || thisHeight > maxHeight) maxHeight = thisHeight;
}).height(maxHeight);
回答by Henry Quekett
From: How can I force all rows in a table to have the same height
<html>
<head>
<style type="text/css">
#fixedheight {
table-layout: fixed;
}
#fixedheight td {
width: 25%;
}
#fixedheight td div {
height: 20px;
overflow: hidden;
}
</style>
</head>
<body>
<table id="fixedheight">
<tbody>
<tr>
<td><div>content</div></td>
<td><div>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</div></td>
<td><div>more content</div></td>
<td><div>small content</div></td>
<td><div>enough already</div></td>
</tr>
</tbody>
</table>
</body>
</html>
