Puis-je utiliser une hauteur min pour table, tr ou td?

120

J'essaie de montrer certains détails d'une réception dans un tableau.

Je veux que cette table ait une hauteur minimale pour montrer les produits. Donc, s'il n'y a qu'un seul produit, le tableau aurait au moins un espace blanc à la fin. En revanche, s'il y a 5 produits ou plus, ce ne sera pas cet espace vide.

J'ai essayé avec ce css:

table,td,tr{
  min-height:300px;
}

Mais ça ne fonctionne pas.

Merci d'avance.

html css kilkadg
la source
1
Il serait utile que vous créiez un violon pour que nous essayions votre code.
mavrosxristoforos

Réponses:

39

Ce n'est pas une bonne solution mais essayez-la comme ceci:

<table>
    <tr>
        <td>
            <div>Lorem</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Ipsum</div>
        </td>
    </tr>
</table>

et définissez les div sur la hauteur min:

div {
    min-height: 300px;
}

J'espère que c'est ce que vous voulez ...

Arnold Zak
la source
2
@SackySan vous devez donner les classes divs et ensuite appliquer cette règle à cette classe uniquement
Zachary Weixelbaum
Ce n'est pas du tout sympa!
Ahmad il y a
408

heightpour des tdœuvres comme min-height:

td {
  height: 100px;
}

au lieu de 

td {
  min-height: 100px;
}

Les cellules du tableau se développeront lorsque le contenu ne rentre pas.

https://jsfiddle.net/qz70zps4/

Aureliano Far Suau
la source
2
Dans mon Google Chrome (version 47.0.2526.106 m) fonctionnant sous Windows 7, j'ai trouvé que le réglage heightde a tdest en fait traité comme un paddinghaut et un bas, ce qui peut introduire un problème de mise en page car vous pensez que c'est vraiment un heightespace. Il ne s'affiche pas comme style ou comme style calculé dans les outils de développement, mais lorsque vous placez votre souris sur l'élément html inspecté, il s'affiche à l'écran.
Felypp Oliveira
mais la question était sur la hauteur min qui ne fonctionne pas! que se passe-t-il si vous avez un long texte et que vous avez besoin d'une autre ligne de hauteur, il sera foiré
CMS
comme @CMS l'a dit, il a posé des questions sur min-heightpas heightcependant comme @frank explique ci-dessous qu'il se comporte de la même manière pour table td. Alors peut-être que cela nécessite une meilleure explication.
dft
3
C'est certainement une meilleure réponse que celle acceptée.
Jinjubei
2
Cette réponse vient de m'économiser potentiellement des heures de travail, devrait être la réponse.
Luke Pring
28

La solution sans divest utilisée un pseudo élément comme ::afteren premier tden ligne avec min-height. Enregistrez votre HTML propre.

table tr td:first-child::after {
   content: "";
   display: inline-block;
   vertical-align: top;
   min-height: 60px;
}
Alex Omelnitckii
la source
13

Dans CSS 2.1, l'effet de 'min-height' et 'max-height' sur les tableaux, les tableaux en ligne, les cellules de tableau, les lignes de tableau et les groupes de lignes n'est pas défini.

Alors essayez d'encapsuler le contenu dans un div, et donnez à la div un min-height jsFiddle ici

<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
    <tbody>
        <tr>
            <td>
                <div style="min-height: 100px; background-color: #ccc">
                Hello World !
                </div>
            </td>
            <td>
                <div style="min-height: 100px; background-color: #f00">
                Goog MOrning !
                </div>
            </td>
        </tr>
    </tbody>
</table>
Sobin Augustine
la source
5

si vous définissez style = "height: 100px;" sur un td si le td a un contenu qui agrandit la cellule plus que cela, il le fera sans avoir besoin de hauteur min sur un td.

franc
la source
0

Les tableaux et les cellules de tableau n'utilisent pas la min-heightpropriété, en définissant leur heighthauteur minimale, les tableaux se développeront si le contenu les étire.

Agu Dondo
la source
-1

Utilisez simplement l'entrée css min-height dans l'une des cellules de votre ligne de tableau. Fonctionne également sur les anciens navigateurs.

.rowNumberColumn {
    background-color: #e6e6e6;
    min-height: 22;
}

<table width="100%" cellspacing="0" class="htmlgrid-table">
    <tr id="tr_0">
            <td width="3%" align="center" class="readOnlyCell rowNumberColumn">1</td>
            <td align="left" width="40%" id="td_0_0" class="readOnlyCell gContentSection">411978430-Intimate:Ruby:Small</td>
Sacky San
la source