CSS：修复行高答案

【问题标题】：CSS: Fix row heightCSS：修复行高
【发布时间】：2010-12-20 20:28:20
【问题描述】：

我有这个标记：

<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>

我需要的是行不会在高度上伸展。有没有办法固定行高？

【问题讨论】：

你想对高于固定行高的内容做什么？
使用最小高度，希望用户没有IE6。
@tad: min-height 与他要求的完全相反。另请注意，除非您使用兼容模式，否则在 IE8 下某些情况下 max-height 无法正常工作：edskes.net/ie8overflowandexpandingboxbugs.htm
table > tbody:after { clear: both;内容：''} 也试试这个。 ^ 为我工作。

标签： css html-table row

【解决方案1】：

如果表格高度大于行的高度，HTML 表格的行高通常会与表格的高度成比例地变化。由于表格强制行高，您可以删除表格高度来解决问题。如果这是不可接受的，您还可以给行明确的高度，并添加第三行，将 auto 调整大小到剩余的表格高度。

CSS2 中的另一个选项是 Max-Height 属性，尽管它可能会导致表格出现奇怪的行为。http://www.w3schools.com/cssref/pr_dim_max-height.asp

。

【讨论】：

最佳。回答。很难设置桌子高度导致我所有的问题，删除它太棒了。
+1 表示“您还可以为行指定显式高度，并添加第三行，该行将自动调整为剩余表格高度。”
Max-Height 属性没有为我解决问题

【解决方案2】：

我还没有尝试过，但是如果您在表格单元格集中放置一个 div 以便它在需要时具有滚动条，那么您可以在其中插入，在 div 上具有固定高度并且它应该保留您的表格行到一个固定的高度。

【讨论】：

【解决方案3】：

如果你需要，你也可以试试这个：

<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>

【讨论】：

【解决方案4】：

只需将style="line-height:0" 添加到每个单元格。这在 IE 中有效，因为它将存在和不存在文本的行高设置为大约 19px，并且在大多数版本的 IE 中强制单元格垂直扩展。无论您是否有文本，IE 都需要这样做才能正确显示小于 20 像素高的行。

【讨论】：

这也解决了我在 Chrome 30 中的问题，我试图让占据它所在的表格单元格的完整大小，没有间隙
line-height 0 如果尝试换行，似乎会使文本一起运行：jsfiddle.net/6wXd8

【解决方案5】：

    
    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>

【讨论】：