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

Question

Je tente de montrer quelques détails d'une réception dans un tableau.

Je veux que ce tableau ait une hauteur minimale pour afficher les produits. Ainsi, s'il n'y a qu'un seul produit, le tableau aurait au moins un peu d'espace vide à la fin. En revanche, s'il y a 5 produits ou plus, il n'aura pas cet espace vide.

J'ai essayé ce CSS :

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

Mais cela ne fonctionne pas.

Answer 1

height pour td fonctionne comme min-height :

td {
  height: 100px;
}

au lieu de

td {
  min-height: 100px;
}

Les cellules de tableau vont s'agrandir lorsque le contenu ne rentre pas.

https://jsfiddle.net/qz70zps4/

Answer 2

Ce n'est pas une belle solution, mais essayez comme ceci :

            Lorem

            Ipsum

et définissez la hauteur minimale des divs :

div {
    min-height: 300px;
}

Answer 3

La solution sans div utilise un pseudo-élément comme ::after dans le premier td de la ligne avec min-height. Gardez votre HTML propre.

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

Answer 4

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

Essayez donc d'envelopper le contenu dans une div et donnez à la div une min-height jsFiddle ici

                    Bonjour le Monde !

                    Bonjour !

Answer 5

Si vous définissez style="height:100px;" sur une cellule (td) et que la cellule contient du contenu qui la fait dépasser cette hauteur, elle s'adaptera en conséquence sans nécessiter de hauteur minimale sur la cellule (td).