Set de table vide à la hauteur de la cellule 100%

J'ai une ligne de la table qui contient 3 tds. Dans le milieu td il y a du texte, de sorte qu'il a une certaine hauteur, comme 100px.

Les deux tds sur la gauche et la droite contenir un tableau à chaque affichage d'une (plus tard) zone cliquable qui est censé avoir la même hauteur que le milieu td - donc 100px dans mon exemple.

Malheureusement, seulement Firefox s'étend sur la gauche et la droite tds à 100% de la hauteur. Chrome, Safari et IE viens de le mettre sur le minium de hauteur.

Voici le violon: http://jsfiddle.net/X3YAu/

J'ai joué avec le display bien, mais il n'a pas aidé. Ne pas le 100% de la hauteur de référence à l'élément parent, et si oui, pourquoi ne pas le tds strech 100% de la hauteur de l'élément parent?

pourquoi êtes-vous à l'aide totale à vide de la première <tr> ?
veuillez faire tripoter essentiel de la css et de l'HTML.
Je connais le html semble compliqué - et c'est, mais j'ai déjà essayé de choisir seulement l'essentiel. Le vrai truc est beaucoup plus lourd
cochez cette jsfiddle.net/X3YAu/7

OriginalL'auteur Horen | 2012-08-31

  1. 14

    Mettre le &nbsp; dans votre vide <td></td> devrait aider.

    Ajout d'infos:

    J'ai réécrit entièrement votre code, car vous avez beaucoup de balises inutiles, cela devrait fonctionner:

    <table align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center" width="100%" height="20" colspan="3" bgcolor="#A9DBF5">
<img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_up.png" width="16" height="16" title="Up" alt="Arrow up" style="display:inline-block;" />
</td>
</tr>
<tr>
<td align="center" width="22" height="100">
<img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_left.png" width="16" height="16" title="Left" alt="Arrow left" style="display:inline-block;padding:3px;background:#A9DBF5;" />
</td>
<td align="left" height="100" bgcolor="#FFFFFF">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</td>
<td align="center" width="22" height="100">
<img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_right.png" width="16" height="16" title="Right" alt="Arrow right" style="display:inline-block;padding:3px;background:#A9DBF5;" />
</td>
</tr>
<tr>
<td align="center" width="100%" height="20" colspan="3" bgcolor="#A9DBF5">
<img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_down.png" width="16" height="16" title="Down" alt="Arrow down" style="display:inline-block;" />
</td>
</tr>
</table>

    Comme vous le voyez, au lieu d'utiliser empty <td>s , je viens de mettre un avec l'argument colspan="3" propagation d'un td entièrement sur trois colonnes.

    Voici une démo: jsbin LIEN

    Noter que, je n'ai pas utilisé de border-radius et border css comme vous l'avez fait, de maintenir le code le plus court possible, de sorte que vous pouvez obtenir l'idée.

    Je l'ai essayé dans le violon, mais il n'a pas aidé
    La td est affiché, ce n'est pas le problème. Le problème est que la hauteur ne s'ajuste pas à 100%...
    ok, votre code est écrit dans les pas de la meilleure façon, par exemple, vous avez beaucoup de vide tds dans votre tableau, vous pouvez utiliser colspan attribut de groupe tous pour un td. je suis à jour de ma réponse, ainsi que la html code.

    OriginalL'auteur aspirinemaga

  2. 6

    Une autre astuce est d'utiliser le :after pseudo-élément:

    td.empty:after {
content: 'Empty cell';
visibility: hidden;
speak: none;
}

    Cela devrait fonctionner dans n'importe quel navigateur (testé dans Chrome sur Windows 7) et vous permet d'économiser beaucoup de &nbsp; et sépare la meilleure présentation de la logique.

    OriginalL'auteur Gianluca Mancini

  3. 5

    il n'y a pas une telle chose comme height: 100%.

    Un élément ne peut jamais remplir ses parents hauteur juste en passant height: 100%, les solutions pour ajouter &nbsp; ou table {empty-cells: show;} devrait faire l'affaire, mais sans une hauteur spécifique, vous ne jamais obtenir l'effet désiré.

    hmm - comment se fait-il fonctionne dans Firefox?
    FireFox gère chose l'autre sens, comme le Chrome, Safari ou Opera et Internet Explorer. ne pas en faire une référence si FF t-il, et tous les autres navigateurs ne le font pas. comme je l'ai dit: il n'y a pas une telle chose un height: 100%.
    comment se fait-il fonctionne dans Chrome lors de la configuration de .ghost.column à display: inline-block;? jsfiddle.net/X3YAu/10
    C'est parce que vous êtes mauvais. Bien sûr, un élément peut remplir son parent de la hauteur en passant height: 100% jsfiddle.net/G8hwd/1 Il serait horrible si elle ne l'a pas fait...
    ok, c'est parce que vous êtes de passage à une hauteur de vos parents, mais dans votre problème d'origine (pour revenir à votre première question, vous n'êtes pas en passant une hauteur de l'élément parent (dans votre jsfiddle), de sorte que l'enfant ne prendra autant de hauteur dont il a besoin. et c'est ce que je veux dire, il n'y a pas de hauteur: 100% si pas de hauteur est définie

    OriginalL'auteur Mark

  4. 2

    Le meilleur moyen serait d'utiliser le CSS.

    table { empty-cells: show; }

    La &nbsp; chemin est un bon moyen, mais c'est un peu un hack.

    Suivez le guide en vedette cs.tut.fi/~jkorpela/HTML/emptycells.html pour une meilleure pratique. Comme les cellules d'un tableau ne devrait pas vraiment être vide.
    Bien que les cellules ne sont pas vraiment vide, il y a un div et un span à l'intérieur. Le div est positionné par rapport et la span absolue si
    Le vide-les cellules de travail CSS pour votre question?
    non, il n'est pas. le td est affiché, ce n'est pas le problème. Le problème est que la hauteur ne s'ajuste pas à 100%...
    empty-cells: show est la valeur par défaut et donc pas la peine d'être précisé.

    OriginalL'auteur Ryan McDonough

  5. 2

    Est-il ok pour utiliser jQuery dans votre solution? Si oui, pourrais-tu mettre la suite dans une fonction et de l'appeler en charge, et à chaque fois que la table est redimensionnée (si il redimensionne)

    $('.ghost.column table').height($('.ghost.column').height())

    Je me demande également si l'aide de tableaux est la meilleure approche pour votre objectif? Est-il une raison pour cela, ou cela pourrait-il être possible d'essayer en utilisant <div> éléments à la place?

    De Travail De Démonstration:
    http://jsfiddle.net/X3YAu/14/

    OriginalL'auteur JDandChips

  6. 1

    J'ai trouvé cette réponse dans un autre thread et cela a fonctionné. Il n'y a pas besoin de mettre des espaces supplémentaires pour les cellules vides de cette façon. 

    td a {
display: inline-block;
height:100%;
width:100%;
}

    OriginalL'auteur Fiona

  7. 0

    Vous avez juste besoin d':

    table { empty-cells: show; 
min-width: 130px; //example.
}

    C'est tout et il a travaillé pour moi

    OriginalL'auteur LagMaster