CSS：固定行高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1806371/
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
CSS: Fix row height
提问by Fuxi
I'm having this markup:
我有这个标记：
<style>
table
{
border:1px solid black;
width:400px;
height:300px;
border-collapse:collapse;
}
table tbody
{
border:1px solid red;
}
table td
{
background:yellow;
padding:10px;
border-bottom:1px solid green;
height:20px;
}
</style>
<table>
<tbody>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
</tbody>
</table>
What I need is that the rows won't stretch in height. Is there a way to have a fixed row height?
我需要的是行不会在高度上伸展。有没有办法固定行高？
回答by PortageMonkey
HTML Table row heights will typically change proportionally to the table height, if the table height is larger than the height of your rows. Since the table is forcing the height of your rows, you can remove the table height to resolve the issue. If this is not acceptable, you can also give the rows explicit height, and add a third row that will autosize to the remaining table height.
如果表格高度大于行的高度，HTML 表格行高通常会与表格高度成比例地变化。由于表格强制您的行的高度，您可以删除表格高度来解决问题。如果这是不可接受的，您还可以为行指定明确的高度，并添加第三行，该行将自动调整到剩余的表格高度。
Another option in CSS2 is the Max-Height Property, although it may lead to strange behavior in a table.http://www.w3schools.com/cssref/pr_dim_max-height.asp
CSS2 中的另一个选项是 Max-Height 属性，尽管它可能会导致表格中出现奇怪的行为。http://www.w3schools.com/cssref/pr_dim_max-height.asp
.
.
回答by horseFeathers
Simply add style="line-height:0"to each cell. This works in IE because it sets the line-height of both existant and non-existant text to about 19px and that forces the cells to expand vertically in most versions of IE. Regardless of whether or not you have text this needs to be done for IE to correctly display rows less than 20px high.
只需添加style="line-height:0"到每个单元格。这在 IE 中有效，因为它将存在和不存在文本的行高设置为大约 19px，并强制单元格在大多数版本的 IE 中垂直扩展。无论您是否有文本，都需要为 IE 正确显示小于 20px 高的行。
回答by jerjer
You can also try this, if this is what you need:
你也可以试试这个，如果这是你需要的：
<style type="text/css">
....
table td div {height:20px;overflow-y:hidden;}
table td.col1 div {width:100px;}
table td.col2 div {width:300px;}
</style>
<table>
<tbody>
<tr><td class="col1"><div>test</div></td></tr>
<tr><td class="col2"><div>test</div></td></tr>
</tbody>
</table>
回答by James Black
I haven't tried it but if you put a div in your table cell set so that it will have scrollbars if needed, then you could insert in there, with a fixed height on the div and it should keep your table row to a fixed height.
我还没有尝试过，但是如果您在表格单元格集中放置了一个 div 以便在需要时它会有滚动条，那么您可以在其中插入，在 div 上具有固定的高度，它应该使您的表格行保持固定高度。
回答by Waruna Manjula
table tbody
{
border:1px solid red;
}
table td
{
background:yellow;
border-bottom:1px solid green;
}
.tr0{
line-height:0;
}
.tr0 td{
background:red;
}<table>
<tbody>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr class="tr0"><td></td></tr>
</tbody>
</table>