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

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最小高度上占据整个高度？

另外,尝试穿上min-height:60px;tr,但没有任何改变......

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.

另一种想法:将60像素高的图像放入其中 td,然后制作float: left:

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

Answer 2

<td height="60">不使用CSS高度或最小高度

对于HTML电子邮件,将表格单元格设置为<td height="60">,并将其视为最小高度.如果您的内容超过60像素,它将相应扩展.

Answer 3

将DIV放入单元格中,改为设置DIV的样式.

Answer 4

最小高度不适用于表格.

有时将元素的高度约束到某个范围是有用的.两个属性提供此功能:min-height&max-height

但是这些不能用于未替换的内联元素,表列和列组.

Answer 5

您无法设置min-height和min-width，但您可以使用一些 CSS3 来实现相同的效果。

.default-table table {
  border-collapse: collapse;
}

.default-table table td {
  padding: 0;
}

.default-table tr:before {
  width: 0px;
  content: '';
  float: left;
  overflow: hidden;
  height: 28px;
  font-size: 0;
}

.default-table {
  overflow: hidden;
}

<div class="default-table">
  <table>
    <tbody>
      <tr>
        <td>Steve</td>
        <td>Smith</td>
        <td>stevesmith@gmail.com</td>
      </tr>
      <tr>
        <td>Jone</td>
        <td>Polanski</td>
        <td>jonep@gmail.com</td>
      </tr>
    </tbody>
  </table>
</div>

但如果你在 td 中有折叠或填充。您必须给出 .default-table 表减去 margin-left。