Html 如何强制表格中的所有行具有相同的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5671098/
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 can I force all rows in a table to have the same height
提问by leora
I am trying to build a html table but I want to force all rows to have the same height (no matter how much content is in the cells). If a cell overruns the space, I want it to just cut off the text and hide the rest.
我正在尝试构建一个 html 表，但我想强制所有行具有相同的高度（无论单元格中有多少内容）。如果一个单元格超出了空间，我希望它只是切断文本并隐藏其余部分。
Is this possible using CSS, etc?
这可以使用 CSS 等吗？
采纳答案by ohmusama
IE only
仅浏览器
CSS:
CSS：
#fixedheight {
table-layout: fixed;
}
#fixedheight td {
height: 20px;
overflow: hidden;
width: 25%;
}
HTML:
HTML：
<table id="fixedheight">
<tbody>
<tr>
<td>content</td>
<td>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</td>
<td>more content</td>
<td>small content</td>
<td>enough already</td>
</tr>
</tbody>
</table>
Universal solution
通用解决方案
CSS:
CSS：
#fixedheight {
table-layout: fixed;
}
#fixedheight td {
width: 25%;
}
#fixedheight td div {
height: 20px;
overflow: hidden;
}
HTML:
HTML：
<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>
回答by Henry Merriam
Set the CSS heightproperty to what you want the cell heights to be, and use overflow: hidden(see CSS overflow) to prevent contents from expanding the cells.
将 CSSheight属性设置为您想要的单元格高度，并使用overflow: hidden（请参阅CSS 溢出）来防止内容扩展单元格。
回答by Alp
Give the table a class:
给表一个类：
<table class="myTable">...</table>
And in the CSS, try the following:
在 CSS 中，尝试以下操作：
table.myTable td {
height: 20px;
overflow: hidden;
}
回答by alignedfibers
The CSS Styles you will want to set are: display:block, min-height, and max-height.
您需要设置的 CSS 样式是：display:block、min-height 和 max-height。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html{font-size:16px;}
table{}
table tr{
display:block;
border-bottom:solid green 1px;
height:.8em;
min-height:.8em;
max-height:.8em;
background-color:#E300E3;
overflow:hidden;
}
</style>
</head>
<body>
<table id="MyTable">
<tr><td>16px Font-Size</td><td>Column2</td></tr>
</table>
</body>
</html>
