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

Je suis en train de montrer certains détails de recevoir dans un tableau.

Je veux que la table pour avoir une hauteur min pour montrer les produits. Donc si il y a un seul produit, la table devrait avoir au moins un peu d'espace blanc à la fin. En revanche si il y a 5 ou plus de produits, il ne sera pas l'espace vide.

J'ai essayer avec ce css:

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

Mais ça ne fonctionne pas.

Merci d'avance.

Il serait utile si vous créez un violon pour nous d'essayer votre code.

InformationsquelleAutor kilkadg | 2013-10-17

css html

35

Ce n'est pas une solution sympa, mais l'essayer comme ceci:
```
<table>
    <tr>
        <td>
            <div>Lorem</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Ipsum</div>
        </td>
    </tr>
</table>
```
et définir les divs pour le min-height:
```
div {
    min-height: 300px;
}
```
Espère que c'est ce que vous voulez ...
- vous devez donner les divs classes et ensuite faire de cette règle s'applique à cette catégorie, mais uniquement
InformationsquelleAutor Arnold Zak
333

height pour td fonctionne comme min-height:
```
td {
  height: 100px;
}
```
au lieu de
```
td {
  min-height: 100px;
}
```
Les cellules de tableau croître lorsque le contenu ne correspond pas.

https://jsfiddle.net/qz70zps4/
- vous avez raison! génial!
- Je vote pour changer cette solution comme la bonne.
- Dans mon Google Chrome (version 47.0.2526.106 m) en cours d'exécution sur un ordinateur Windows 7, j'ai trouvé que la définition de la height d'un td est en fait traitée comme une padding en haut et en bas, ce qui peut introduire des problème de mise en page que vous pensez que c'est vraiment un height de l'espace. Il ne montre pas un style ou une angiographie de style dans les outils de dev, mais quand vous mettez votre souris sur l'inspecter l'élément html s'affiche sur l'écran.
- mais la question a été sur le min-height qui ne fonctionne pas! qu'advient-il si vous avez un texte long et a besoin d'une autre ligne avec la hauteur, il va se faire massacrer
- comme @CMS a dit, il a demandé à propos de min-height pas height cependant que @frank explique ci-dessous, il se comporte de la même pour table td. Peut-être que ce besoin d'un peu plus d'explication.
- J'ai pensé qu'un Violon était une image vaut mille mots.
- totalement violon est génial, j'ai juste sauté sur la première fois lors de l'analyse du texte dans la description
- C'est certainement une meilleure réponse que l'on a accepté un.
- Cette réponse vient de m'a sauvé potentiellement heures de travail, devrait être la réponse.
- Avez-vous de la citation de CSS que les états "height = min-height pour les cellules de tableau"? Btw, le lien est mort.
- Je n'ai pas. J'ai corrigé le lien, donc il est de nouveau disponible. Des acclamations.
InformationsquelleAutor Aureliano Far Suau
26

La solution sans div est utilisé un pseudo-élément comme ::after en premier td en ligne avec min-height. Enregistrez votre code HTML propre.
```
table tr td:first-child::after {
   content: "";
   display: inline-block;
   vertical-align: top;
   min-height: 60px;
}
```
InformationsquelleAutor omelniz

Dans CSS 2.1, l'effet de "min-height" et "max-height' sur les tables,
inline tables, des cellules de tableau, les lignes de la table, et les groupes de lignes n'est pas défini.

Donc, essayez d'emballage le contenu dans un div, et de donner la div une 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>

InformationsquelleAutor Sobin Augustine

5

si vous définissez style="height:100px;" sur un td si la td a un contenu qui pousse la cellule de plus, elle n'aura donc pas besoin pour min de hauteur, sur un td.

InformationsquelleAutor frank

Simplement utiliser le css entrée de min-hauteur de l'une des cellules de votre ligne de la table. Fonctionne sur les anciens navigateurs trop.

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

InformationsquelleAutor Sacky San

0

Des Tables et des cellules de tableau n'utilisez pas le min-height propriété, la définition de leurs height sera le min-height, comme les tableaux de développer si le contenu s'étend eux.

InformationsquelleAutor Agu Dondo

Vous devez vous connecter pour publier un commentaire.