如何强制最小高度在桌子上 [英] How to force min-height on table

问题描述

我有此代码：

 < table cellspacing =0cellpadding =0border =0style =width：415px> 
< tbody> 
< tr valign =top> 
< td style =font-family：Arial; min-height：60px; font-size：12px; line-height：14px;> 
这是我需要的文本，在2行
< / td> 
< / tr> 
 
< tr valign =top> 
< td style =font-size：12px; line-height：14px> 
第二行
< / td> 
< / tr> 
< / tbody> 
< / table> 
  

正如你所看到的，第一个tr / td应该是height 60px（因为许多原因，我不能直接使用height（这个代码）

那么，我如何在td trought min-height上取整个高度呢？

此外，尝试在tr上插入 min-height：60px; ，但没有更改...

解决方案

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> 
这是我需要的2行文本
< / div> 
< / td> 
  

编辑：您说这对Outlook无效。另一种方法：在 td 中放置一个60像素高的图像，并将其设置为 float：p>

<左：

 < td> 
< img src =...style =float：left> 
< / td> 
  

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

解决方案

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> 

这篇关于如何强制最小高度在桌子上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！