How to force min-height on table

问题:

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.

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

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

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

回答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.

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

What should always work is wrapping the content in a div, and applying min-height to that, as shown in 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>

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

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

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

回答3:

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

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

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.

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:

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

回答6:

HTML :

<table></table>

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:

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

回答9:

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

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

回答11:

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

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