logo标签列表

如何在表格上强制使用最小高度？

htmlcsshtml-email
31

我有 这份 代码：

<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），但实际上并不是。

由于许多原因，我不能直接使用height（这段代码是通过后台系统在通讯中格式化的）。

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

同时，我尝试将min-height:60px;放在tr上，但没有任何变化...

如果您将一个 div 放在 td 中并在其上设置 min-height，会发生什么？ - Murray McDonald
我不行！Outlook 抹掉 div ...! 我需要表格... - markzzz
13个回答
39

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>
2
@markzzz 那我认为你不能这样做 - 除非你可以尝试使用 <p>。否则，我认为 height 是唯一的方法。 - Pekka
@markzzz 你可以尝试使用 <p> 标签，但很有可能 Outlook 也会搞砸它，如果它打破了 <div>。 - Pekka
尝试在<p>上，是的它们也被切了！图像示例看起来很棒，但太复杂了！而且，我确定float:left也被切掉了...所以它不会起作用.. :( - markzzz
@markzz 如果我是你，我会尝试使用图片（或者使用 align="left" - 我想不出更好的方法了）。 - Pekka
4
CSS没有让我失望，这正是我对CSS的期望。折磨。 - Muhammad Umer
显示剩余2条评论
26

使用 <td height="60"> 而不是 CSS 的 height 或 min-height

针对 HTML 邮件，请将您的表格单元格设置为 <td height="60">，这将被视为最小高度。 如果您的内容超过 60px，它会相应地扩展。

1
不仅仅是电子邮件，对于所有的表格和CSS也是如此。 - I.G. Pascual
这应该是正确的答案，以使其在Outlook/电子邮件中正常工作。 - deshg
1
太棒了！运行得非常好。height现在是表格的新min-height。 :) - Joshua Pinter
这解决了我在Outlook 2013中高度不一致的问题！ :) - tom_mai78101
这已经被弃用了。 - Stof
11
将一个DIV放在单元格中，对DIV进行样式设置。
9

在表格上，min-height不起作用。

有时将元素的高度限制在一定范围内是很有用的。两个属性可以提供此功能：min-height和max-height

但这些属性不能用于非替换的内联元素、表格列和列组。

6

您无法设置 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>

但是如果您在单元格中有折叠或填充，则必须为.default-table表格减去margin-left。

3

HTML :

<table></table>

CSS :

table{
    height:0px; /*Set any facultative length value to Height (percentage value doesn't work)*/
    min-height:100vh;
}

这是我经常解决这个问题的方法...
最佳答案！谢谢。 :) - lufi
2

以下是在Outlook（已测试）和其他电子邮件客户端中可行的解决方案：

<td style="mso-line-height-rule:exactly;line-height:300px;">&nbsp;</td>

使用CSS实现的这种方法比使用图片更加清晰易懂，同时能够避免因为图片而降低垃圾邮件得分。

如果在标签中还有其他内容不希望应用该行高度规则，你可以将非断行空格包裹在标签中，然后设置该标签的line-height:

<td><span style="mso-line-height-rule:exactly;line-height:300px">&nbsp;</span>**Other content without 300px line-height here**</td>
原因是height或min-height适用于<div>标签而不适用于<td>，这是因为<td>被设置为display:table-cell并且不像display:block元素(<div>)一样尊重height。
2

添加显示块

<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;display:block;">
他问如何强制在单元格上使用它，因此我提供了这个答案。当然，在TD中使用另一个标签是正确的方法，但我认为我正确地回答了他的问题。 - Dave Hogan
1
中min-height无效，设置高度以起到类似于min-height的作用，并在需要时自动增加高度。这对我很有效。
1

我通过将样式添加为display:block;来解决了这个问题。

<td style="display:block; min-height:200px;">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接