Faire de la couleur d'arrière-plan d'un <div> remplir les enfermant <td>

J'ai un tableau HTML dont les cellules contiennent divs avec display:inline-block, contenant le texte de différentes tailles.

J'ai besoin de le texte à aligner sur la ligne de base, et j'ai besoin de les couleurs d'arrière-plan de la divs pour remplir la hauteur des cellules. Pour la plus grande police de caractères, la couleur d'arrière-plan ne remplir la cellule, mais il n'est pas pour les petites polices:

Faire de la couleur d'arrière-plan d'un <div> remplir les enfermant <td>

Est-ce possible? Les solutions évidentes comme div { height:100% } semblent être saborder par la diversité des tailles de police.

Voici le code pour l'instant:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style type="text/css">
    table td {
        vertical-align: baseline;
        padding: 0;
    }

    td div {
        display: inline-block;
    }
  </style>
</head>
<body>
    <table>
        <tr>
            <td style="background-color:cyan">
                <div style="background-color:pink;">Pink</div>
                <div style="background-color:green;">Green</div>
            </td>
            <td style="background-color:cyan">
                <div style='font-size: 40pt; background-color:yellow;'>
                    Big yellow text
                </div>
            </td>
            </tr>
  </table>
</body>
</html>

C'est aussi sur jsfiddle ici.

Si vous êtes déjà à l'aide d'un tableau, pourquoi ne pas simplement utiliser les cellules d'un tableau?
C'est compliqué. 🙂 J'ai besoin de la divs pour des raisons qui ne sont pas évidentes à partir de cet exemple simplifié.
Sont les polices les tailles les valeurs connues? Pouvez-vous faire le calcul et le rembourrage sur la police de caractère plus petite des blocs?
Pas vraiment. Le code HTML est généré imaginer un PDF-to-HTML programme de conversion et c'est à peu près de quoi on parle. (Aussi, je ne sais pas à l'avance quelles polices sont utilisées.)
Dupe de stackoverflow.com/questions/3542090/...

OriginalL'auteur RichieHindle | 2011-12-01

  1. 2

    Rapide et sale correctif:

    CSS 

    div {
    line-height:60px;
    height:60px;
    vertical-align:middle;
}

    Démo: http://jsfiddle.net/2YbBg/

    Malheureusement, le texte n'est plus alignée le long de la ligne de base.

    OriginalL'auteur AlienWebguy

  2. 1

    Pas parfait, mais le plus proche que j'ai pu obtenir:

    http://jsfiddle.net/gfPkV/14/

    Fonctionne très bien mais, dans les rares cas où un utilisateur est agrandie en même un peu, il est hors de nouveau.
    Malheureusement, le texte n'est plus alignée le long de la ligne de base.
    Et serait-il une option pour ajouter une div pour la couleur de remplissage? Voir mon lien mis à jour - cela préserve la base de l'alignement (bien qu'encore un peu brouillon)
    Belle dans Chrome, mais brisée dans Firefox et IE. position:relativecomportement n'est pas défini pour <td>, et Firefox l'ignore. Je ne suis pas sûr de ce que IE pense qu'il est en train de faire, mais il est sûr de ne pas la droite. 🙂

    OriginalL'auteur ptriek

  3. 0

    J'ai lu une fois, que td n'a pas de rapport c'est la hauteur. De sorte que toute height: 100% ou height:auto, etc.. ne fonctionne pas.

    Donc ma solution est ici: http://jsfiddle.net/UGTYP/

    Il change de hauteur de "rose" du texte à la hauteur de "jaune" div " avec javascript.

    Malheureusement, le texte n'est plus alignée le long de la ligne de base.

    OriginalL'auteur JercSi