CSS：修复行高

Question

我有这个标记：

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

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

Answer 1

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

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

。

Answer 2

只需将style="line-height:0"添加到每个单元格即可。这适用于IE，因为它将existant和non-existant文本的行高设置为大约19px，并且在大多数IE版本中强制单元格垂直扩展。无论您是否有文本，都需要为IE正确显示低于20px的行。

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

Answer 4

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

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