如何在桌子上强迫米高?

I have this code :

我有这个代码:

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

As you can see, the first tr/td should be height 60px (min-height:60px) but in fact it isn't.

可以看到，第一个tr/td应该是60px (min-height:60px)，但实际上不是。

For many reasons, I can't use height directly (this code is formatted trought back office system, in a newsletter).

由于许多原因，我不能直接使用高度(这段代码是格式化的trought back office系统，在时事通讯中)。

So, how can I take the whole height on the td trought min-height?

那么，我怎样才能把td trought min-height上的整个高度取下来呢?

Also, tried putting min-height:60px; on tr, but nothing change...

同时,试着把最小高度:60 px;在tr上，但是没有变化…

12 个解决方案

#1

min-height 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.

在CSS 2.1中，“最小宽度”和“最大宽度”对表、内联表、表单元格、表列和列组的影响没有定义。

I can only assume this applies to td and tr as well.

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

What should always work is wrapping the content in a div, and applying min-height to that, as shown in this JSFiddle:

应该始终工作的是在div中包装内容，并对其应用最小高度，如这个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>

Edit: You say this doesn't work with Outlook.

编辑:你说这和Outlook不一样。

Alternative idea: Place a 60 px tall image in the td, and make it float: left:

备选方案:在td中放置一个60像素高的图像，使其浮动:

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

#2

Use <td height="60"> not CSS height or min-height

For HTML email set your table cell as <td height="60"> and it will treat that as the min-height. If your content is more than 60px, it will expand accordingly.

对于HTML邮件，将您的表单元格设置为，它会将其视为最小的高度。如果你的内容超过60px，它会相应地扩展。

#3

Put a DIV in the cell, style the DIV instead.

在单元格中放入DIV，改为样式化DIV。

#4

Min-height doesn't works on tables.

最小高度不适用于表格。

It is sometimes useful to constrain the height of elements to a certain range. Two properties offer this functionality: min-height & max-height

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

But these can't be used on non-replaced inline elements, table columns, and column groups.

但是这些不能用于不可替换的内联元素、表列和列组。

#5

You can't set min-height and min-width, but you can use some CSS3 for achievements this same effect.

你不能设置最小的高度和最小的宽度，但是你可以使用一些CSS3来实现同样的效果。

HTML:

HTML:

<div class="default-table">
    <table>
        <tbody>
            <tr>
                <td>Steve</td>
                <td>Smith</td>
                <td>[e-mail]</td>
            </tr>
            <tr>
                <td>Jone</td>
                <td>Polanski</td>
                <td>[e-mail]</td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

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

but if u having collapse or padding in td. You must give for .default-table table minus margin-left.

但如果你有崩溃或填充在td。你必须放弃。default-table -left。

#6

HTML :

HTML:

<table></table>

CSS :

CSS:

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

That's how I always resolve this problem ...

这就是我解决这个问题的方法……

#7

Add display block

添加显示块

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

#8

Here's a solution that works in Outlook (tested) and other e-mail clients:

这是一个在Outlook(测试)和其他电子邮件客户端工作的解决方案:

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

This is cleaner than using an image, which could negatively affect your spam score, and does the exact same thing.

这比使用图片要干净，图片可能会对垃圾邮件评分产生负面影响，而且效果是一样的。

If you have other content in the <td> that you don't want to have that line height, you can just wrap the non-breaking space in a <span> and set the line-height on that tag:

如果你在中有其他内容，你不想要那个行高，你可以把不破坏的空间放在一个中，并在标签上设置行高:

<td><span style="mso-line-height-rule:exactly;line-height:300px">&nbsp;</span>**Other content without 300px line-height here**</td>

The reason height or min-height works on <div> tags and not <td> is because <td> are set to display:table-cell and do not respect height the same way that display:block (<div>) elements do.

高度或最小高度在

标签上工作而不的原因是被设置为显示:table-cell，不像显示:block (

)元素一样尊重高度。

#9

I have resolved this issue by adding display:block; to its style as

我通过添加display:block解决了这个问题;自己的风格

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

#10

Here is a solution that does not depend on the height in pixels. It works in all email clients:

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

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

The solution works by adding a zero-width column with two lines to the right of the first one. It uses the  character, which is a non-breaking zero-width space.

解决方案的工作方式是在第一个列的右边添加一个0宽度的列，并在第一个列的右边添加两行。它使用& # xfeff;字符，是一个不间断的零宽度空间。

#11

It may be reviving a 2012 post, for those who searched and found this post like me:

它可能会重新激活2012年的一篇文章，对那些搜索和发现这篇文章的人来说:

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

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

#12

What I found !!!, In tables CSS td{height:60px;} works same as CSS td{height:60px;}

我发现! ! !，在表中CSS td{height:60px;}与CSS td{height:60px;