如何在桌子上强制最小高度

Question

我有 这段 代码：

 <table cellspacing="0" cellpadding="0" border="0" style="width:415px">
    <tbody>
        <tr valign="top">
            <td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
                This is my text that I need in 2 lines
            </td>
        </tr>

        <tr valign="top">
            <td style="font-size:12px;line-height:14px">
                Second Line
            </td>
        </tr>
    </tbody>
</table>

如您所见，第一个 tr/td 应该是高度 60px ( min-height:60px ) 但实际上不是。

由于多种原因，我不能直接使用高度（此代码是通过后台系统格式化的，在新闻稿中）。

那么，如何在 td trought min-height 上获取整个高度？

另外，尝试将 min-height:60px; 放在 tr 上，但没有任何改变……

原文由 markzzz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

min-height 不适用于表格元素：

在 CSS 2.1 中，’min-width’ 和 ‘max-width’ 对表格、内联表格、表格单元格、表格列和列组的影响是未定义的。

我只能假设这也适用于 td 和 tr 。

应该始终有效的是将内容包装在一个 div 中，并将 min-height 应用于它，如 JSFiddle 所示：

  <td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
            <div style="min-height: 60px; background-color: green">
            This is my text that I need in 2 lines
            </div>
        </td>

编辑： 你说这不适用于 Outlook。

替代想法：在 td 中放置一个 60 像素高的图像，并使其成为 float: left ：

 <td>
  <img src="..." style="float: left">
</td>

原文由 Pekka 发布，翻译遵循 CC BY-SA 3.0 许可协议