html - 如何在 table 上强制最小高度

Question

我有this代码:

<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 上，但没有任何变化...

Answer 1

最小高度 doesn't work for table elements:

In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.

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

应该始终有效的是将内容包装在一个 div 中，并对其应用 min-height，如 this 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 px 高的图像，并使其 float: left:

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