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>

我需要的是行不会在高度上拉伸。有没有一种方法可以固定行高？

- Fuxi

---

内容高度超过固定行高的情况下，您想要做什么？ - Lior Cohen

使用min-height，并希望用户不要使用IE6。 - tahdhaze09

@tad：min-height恰好与他所要求的相反。另外请注意，在IE8下，除非您使用兼容模式，否则max-height在某些情况下无法正常工作：http://edskes.net/ie8overflowandexpandingboxbugs.htm - diadem

表格 > 表体:after { clear: both; content: ''} 也可以尝试这个。 ^ 对我有用。 - Pangamma

Answer 1

如果表格高度大于行高，HTML表格行高通常会按比例变化。因为表格强制改变了行高，所以您可以删除表格高度来解决该问题。如果这样做不可接受，您还可以为行指定显式高度，并添加第三行，该行将 自动 调整为剩余表格高度。

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

.

- PortageMonkey

---

最佳答案。设置表格高度困难导致了所有问题，移除后效果非常好。 - adam.kuyrkendall

你也可以为行指定显式高度，并添加第三行，使其自动调整为剩余表格高度。 - Kosta Kontos

Max-Height 属性对我来说并没有解决问题。 - Tarun Gupta

Answer 2

只需在每个单元格中添加style="line-height:0"。这适用于IE，因为它将现有和不存在的文本的行高设置为约19像素，从而迫使大多数版本的IE在垂直方向上扩展单元格。无论是否有文本，为了使IE正确显示少于20像素高的行，都需要执行此操作。

- horseFeathers

---

这也解决了我的Chrome 30问题，我试图让<img>占据它所在的表格单元格的全部空间而没有间隙。 - Erin Drummond

line-height 0似乎会使文本在尝试换行时紧密结合：http://jsfiddle.net/6wXd8/ - Kasapo

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>

- jerjer

Answer 4

我尚未尝试过，但如果您将一个带有滚动条的 div 放入表格单元格中，并设置 div 的高度为固定值，那么您可以在其中插入内容，这应该可以使您的表格行保持固定高度。

- James Black

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>

- Waruna Manjula