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

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

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>

Answer 6

此方法非常适合具有固定高度的行，并阻止表格布局移动。
您必须添加 来填充表格的其余部分，因此您的行不必展开并可以保存其固定高度。

<table class="table" >
  <tr class="fixed-height" >
    foo1
  </tr>
  <tr class="fixed-height" >
    foo2
  </tr>
  <tr class="fixed-height" >
    foo3
  </tr>
  <tr class="auto-height" > // responsible for filling up the table
  </tr>
</table>

.table {
  height: 80vh;
}

.fixed-height {
  height: 50px; /*fixed height for table rows */ 
}

.auto-height {
  height: calc(100% - 100px); /* Remaining height assigned to a non visible row */
}