Faire tous les tds d'égale hauteur, lors de chaque td contient un div avec du contenu dynamique?

Im essayant de faire tous les tds dans un tableau d'égale hauteur. J'ai quatre cellules, chacune avec une largeur de 25%. Chaque td aura un div en fonction du contenu, qui sera dynamique et de longueur variable. Je ne peux pas changer la structure de celle-ci.

Toute aide sera grandement appréciée. Merci..!!

Violon lien: http://jsfiddle.net/binita07/kVm7P/1/

HTML

<div class="test">
<table>
    <td><div>Dummy Content 1</div></td>
    <td><div>Dummy Content 2</div></td>
    <td><div>Dummy Content 1 and will be more</div></td>
    <td><div>Dummy Content 4</div></td>
</table>
</div

CSS

.test{
width:400px;
background:#f00;
}
table{
border-collapse:collapse;
padding:0;
}
table td{
    width:25%;
    display:table-cell;
    vertical-align:top;
    min-height:30px;
}
table td div{
    background:green;
    height:100%;
}
Les tds sont déjà d'égale hauteur, c'est le divs qui ne le sont pas. Avez-vous besoin d'utiliser des divs Ne pouvez-vous pas juste de mettre les données dans les cellules?
Oui Andy, j'ai besoin d'utiliser des divs à l'intérieur de td..qui est le problème ici..je ne suis pas capable de l'étendre à tous le chemin vers le bas.Merci
Vous pouvez supprimer la couleur d'arrière-plan à partir des divs et le mettre sur la tds, en utilisant des cellules de l'espacement de montrer la couleur rouge.

OriginalL'auteur Binita Lama | 2014-05-19

  1. 16

    Simplement changer min-height:30px; à height:30px;, en effet, vous pouvez effectivement mis à height:0px;

    Démo De Violon

    Vous avez actuellement min-height ensemble, mais cela ne fonctionnera jamais sans hauteur définie pour le même élément, tel qu'il est calculé relativement à la propriété.

    Aussi, pour l'enfant div éléments que vous avez height:100%, cependant, encore une fois, sans une hauteur spécifique sur le parent td, il n'y a aucune référence relative, de sorte qu'il devient 100% de rien.

    Ajoutant height:0; pour le parent td offre une hauteur de la valeur de la cellule de sorte que le div de hauteur, peuvent alors être calculée par rapport à quelque chose, en raison de layouting cette hauteur est forcé à développer pour s'adapter à l'enfant de contenu plutôt que de simplement 'coller à zéro".

    - Ce vraiment bien travaillé....merci!!
    Désolé pour le commentaire, donc à la fin, mais comment faire ce travail sur FF?
    génial! vous avez sauvé mon temps. 🙂

    OriginalL'auteur SW4