web-dev-qa-db-fra.com

Comment forcer min-height sur la table

J'ai ce 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>

Comme vous pouvez le constater, le premier fichier tr/td devrait avoir une hauteur de 60px (min-height:60px), mais ce n’est pas le cas.

Pour de nombreuses raisons, je ne peux pas utiliser directement height (ce code est formaté dans un système de back office, dans une newsletter).

Alors, comment puis-je prendre toute la hauteur sur le td trought min-height?

Aussi, essayé de mettre min-height:60px; sur tr, mais rien ne change ...

htmlcsshtml-email
27
markzzz

min-heightne fonctionne pas pour les éléments de table:

En CSS 2.1, l'effet de 'min-width' et 'max-width' sur les tableaux, les tableaux incorporés, les cellules de tableau, les colonnes de tableau et les groupes de colonnes est indéfini.

Je ne peux que supposer que cela s'applique également à td et tr.

Ce qui devrait toujours fonctionner, c’est d’emballer le contenu dans une div et d’appliquer min-height à cela, comme indiqué dans 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: Vous dites que cela ne fonctionne pas avec Outlook.

Idée alternative: placez une image haute de 60 px dans la variable td et définissez-la float: left:

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

Utilisez <td height="60"> et non pas CSS height ou min-height

Pour le courrier électronique HTML, définissez votre cellule de tableau sur <td height="60"> et traitera cela comme une hauteur minimale. Si votre contenu dépasse 60 pixels, il se développera en conséquence.

16
John

Placez un DIV dans la cellule, appelez-le à la place.

10
Diodeus - James MacFarlane

Min-height ne fonctionne pas sur les tables.

Il est parfois utile de limiter la hauteur des éléments à une certaine plage. Deux propriétés offrent cette fonctionnalité: min-height & max-height

Mais ils ne peuvent pas être utilisés sur des éléments en ligne, des colonnes de tableau et des groupes de colonnes non remplacés.

9
dg90

HTML:

<table></table>

CSS:

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

C'est comme ça que je résous toujours ce problème ...

3
BBeta

Vous ne pouvez pas définir min-height et min-width , mais vous pouvez utiliser du CSS3 pour obtenir les mêmes résultats.

HTML:

<div class="default-table">
    <table>
        <tbody>
            <tr>
                <td>Steve</td>
                <td>Smith</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Jone</td>
                <td>Polanski</td>
                <td>[email protected]</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;
}

mais si vous avez un effondrement ou un remplissage dans td. Vous devez donner pour .default-table table moins margin-left.

3
Davton

Voici une solution qui fonctionne dans Outlook (testé) et d'autres clients de messagerie:

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

C'est plus propre que d'utiliser une image, ce qui pourrait affecter négativement votre score de spam et fait exactement la même chose.

Si vous avez d'autres éléments dans le <td> pour lesquels vous ne souhaitez pas que cette hauteur de ligne soit définie, vous pouvez simplement envelopper l'espace insécable dans un <span> et définir le line-height sur cette balise:

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


La raison height ou min-height fonctionne sur les balises <div> et non pas <td> parce que <td> est défini sur display:table-cell et ne respecte pas height de la même manière que les éléments display:block (<div>).

2
Alex W

Ajouter un bloc d'affichage

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

J'ai résolu ce problème en ajoutant display:block; à son style en tant que

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

Il se peut qu’il s’agisse de relancer un post de 2012, pour ceux qui ont cherché et trouvé ce post comme moi:

table tr:first-child td:before {
  min-height: 100px;
  display: block;
  content: ""
}
<table border="1">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

0
Taha Paksu

Voici une solution qui ne dépend pas de la hauteur en pixels. Cela fonctionne dans tous les clients de messagerie:

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

La solution fonctionne en ajoutant une colonne de largeur nulle avec deux lignes à droite de la première. Il utilise le & # xfeff; caractère, qui est un espace de largeur zéro insécable.

0
Pavel Plachký