Comment définir la hauteur minimale pour tbody en CSS

Je veux mettre une hauteur minimale pour tbody dans le CSS, même si aucune <tr><td></td></tr> dans tbody, voici mon code:

tbody{
  height: 500px;
  min-height:500px;
}

mais ça ne fonctionne pas. alors que dois-je faire pour y parvenir?

Montrer peu plus de code, de sorte que nous comprenons exactement ce que vous espérez atteindre. Il se peut qu'un tableau n'est pas le bon choix de balisage de ce que vous voulez faire.
Vous avez probablement besoin d'ajouter un width trop si il n'y a pas de contenu...
supprimer height: 500px;
J'ai le même problème. Ma table a un filtre sur chaque colonne. Lorsque seulement quelques enregistrements sont affichés, je veux le pied de tableau séjour au bas encore, plutôt que de sauter haut et en bas. Si j'ai mis tbody affichage de "bloquer", puis la colonne de ne pas aligner avec thead.

OriginalL'auteur hiway | 2013-03-20

css css-tables

8

Pourquoi vous voulez faire cela?

Min-hauteur et la hauteur s'applique à des éléments de niveau bloc et le tableau n'est pas un élément de niveau bloc.
Enveloppez votre table à l'intérieur d'un div (dire div.table-wrap) et appliquer une hauteur minimale de div.

Si vous ne voulez pas de disposition de table n'est pas important pour vous, puis il suffit d'ajouter display:block à la CSS de tbody.

désolé, je ne sais pas min-height ne peut pas appliquée à l'élément tbody. Je veux tbody laisser de l'espace à l'écart de thead si aucun contenu n'en tbody,et j'essaie juste d'ajouter display:block, ce qui rend l'apparence de la table très laid. Peut-être que je devrais utiliser div élément la place. Merci.
Une table peut avoir plus d'un <tbody>. Je voudrais qu'ils soient un min-height.

OriginalL'auteur Pankaj Phartiyal
3

Espère que cette démo va travailler pour vous...

Css:
```
  tbody{
     height: auto;
     min-height:200px;
     display:block
    }
```
Violon

Cela ne fonctionne pas pour moi.

OriginalL'auteur Senthil Sivaramakrishnan
2

Nous avons besoin de le min-height sur le <tbody> que nous ne pouvions pas injecter d'autres éléments HTML (contenu de l'utilisateur). J'ai trouvé une solution.

Hauteur travaille pour une table vide, mais pas si la table vide a un vide tbody de Chrome (59) - il fonctionne pour Firefox et Egde. Aussi d'autres cas cachés <tr> a donné ces problèmes, voir JSFiddle pour tous les cas.

CSS:
```
.test {
  border: 1px solid red;
  height: 60px;
}
```
Html:
```
Empty table:
<table class=test>

</table>

Empty tbody:
<table class=test>
  <tbody></tbody>
</table>
```
Chrome 59:

Bord (14), IE (11), Firefox (54):

Fixe-le avec:
```
tbody:before {
  content: ''/* needed for chrome*/
}
```
Voir mise à jour JSFiddle

OriginalL'auteur Julian
0

Je pense que cela va faire,
```
table{height:500px !important;}
```
maintenant ce !important fera volontaire, elle sera remplacée facilement par d'autres attributs.

tbody n'a pas la propriété de hauteur.

il ne porte que des 4 propriétés 'aligner', 'char','charoff" & "valign" que par la normalisation de la CSS.

aussi cela fonctionne avec des cellules de même taille et de l'espacement des cellules ajoutées dans l'espace restant.
```
tbody{
  height:500px;
  display:block; 
}
```
Essayer et y répondre, j'espère que ça va le faire 🙂

le min-height sera complètement ignoré par la balise tbody
Oui ne soutiendra pas, j'ai appelé de nouveau le code et révisé trop 🙂

OriginalL'auteur MarmiK
-1

vous devez ajouter display: block; trop.

OriginalL'auteur Suracheth Chawla
-1

Peut-être que vous utilisez IE 5 ou 6. Pourquoi ne pas utiliser uniquement la hauteur de la place? Essayez de retirer min-height, car il n'y a pas de point de réglage de la hauteur et min-height sur le même élément, car tout ce que vous obtenez est une hauteur fixe et pas min-height.

vous pouvez ajouter height:80%; min-height:400px;. Votre réponse n'aide pas à la question.

OriginalL'auteur Brilliant Robert

Vous devez vous connecter pour publier un commentaire.