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

如果表格高度大于行的高度,则表格行高度通常会与表格高度成比例变化.由于表格强制行的高度,您可以删除表格高度以解决问题.如果这是不可接受的,您还可以为行显示高度,并添加第三行,该行将自动调整为剩余的表高度.

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 上具有固定的高度，并且它应该使你的表格行保持固定高度。