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

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

min-height doesn't work for table elements:

  

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

我只能假设这也适用于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像素高的图片，并将其设为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＆amp; max-height

但这些不能用于未替换的内联元素，表列和列组。

Answer 5

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

HTML：

<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>

CSS：

.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;
}

但是如果你在td中崩溃或填充。你必须给.default-table表减去margin-left。

Answer 6

HTML：

<table></table>

CSS：

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

我总是如何解决这个问题...

Answer 7

添加显示块

<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;display:block;">

Answer 8

这是一个适用于Outlook （已测试）和其他电子邮件客户端的解决方案：

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

这比使用图像更清晰，这可能会对您的垃圾邮件评分产生负面影响，并做同样的事情。

如果<td>中有其他内容，您不希望拥有该行高，则可以将不间断空格包装在<span>中并设置{{ 1}}在那个标签上：

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与height（display:block）元素相同的方式。

Answer 9

我已通过将display:block;添加到其样式

来解决此问题

<td style="display:block; min-height:200px;">

Answer 10

min-height在td中不起作用，设置高度将与min-height一样工作，并在需要时自动增加高度。这对我有用

Answer 11

这是一个不依赖于像素高度的解决方案。它适用于所有电子邮件客户端：

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

    </tr>

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

该解决方案的工作原理是添加一个零宽度列，在第一个列的右侧有两行。它使用＆amp; #xfeff;字符，这是一个不间断的零宽度空间。

Answer 12

对于那些搜索并发现像我这样的帖子的人来说，它可能正在重振2012年的帖子：

＆＃13;

＆＃13;

table tr:first-child td:before {
  min-height: 100px;
  display: block;
  content: ""
}

＆＃13;

<table border="1">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 13

我找到了什么!!!，在表格中CSS td{height:60px;} 与CSS相同 td{height:60px;}