css - 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 表格行高通常会与表格高度成比例变化。由于表格强制行高，您可以删除表格高度来解决问题。如果这是不可接受的，您还可以给行明确的高度，并添加第三行，将自动调整大小到剩余的表格高度。

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

.

Answer 2

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.

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>