J'ai une table HTML dont les cellules contiennent J'ai besoin du texte pour aligner sur La ligne de base, et j'ai besoin des couleurs d'arrière-plan du est-ce possible? Solutions évidentes telles que Voici le code jusqu'à présent: p> div code> S avec Affichage: Inline-Block code>, contenant du texte de tailles variables. div code> s pour remplir la hauteur des cellules. Pour la plus grande police, la couleur de fond fait em> remplit la cellule, mais elle ne fait pas pour les plus petites polices: p> 
P> div {hauteur: 100%} code> semblent être scapperés par la taille de la police variable. P> <!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>
3 Réponses :
Pas parfait, mais le plus proche que je puisse obtenir:
Fonctionne bien mais, dans le cas rare qu'un utilisateur est zoomé, même un peu, c'est à nouveau.
@Ptriek: Malheureusement, le texte n'est plus aligné le long de la ligne de base.
Et serait-il une option d'ajouter une DIV supplémentaire pour la couleur de remplissage? Voir mon lien mis à jour - cela préserve l'alignement de base (bien que toujours un peu désordonné)
@ptriek: charmant en chrome, mais brisé à Firefox et c'est-à-dire. J'ai lu une fois, que Donc, ma solution est ici: http://jsfiddle.net/ugtyp/
Il change la hauteur du texte "rose" à la hauteur de "jaune" div avec JavaScript.
Malheureusement, le texte n'est plus aligné le long de la ligne de base. Fix rapide et sale: CSS
Malheureusement, le texte n'est plus aligné le long de la ligne de base. Position: Relative S est indéfini pour et Firefox l'ignore. Je ne suis pas sûr de ce que c'est-à-dire que ça pense que ça va, mais ça ne va pas bien. :-)
1
votes
TD ne signale pas sa hauteur. Donc, tout hauteur: 100% ou hauteur: auto , etc .. ne fonctionnera pas.
1 commentaires
2
votes
1 commentaires
Si vous utilisez déjà une table, pourquoi ne pas utiliser de cellules de table?
@Mathletics: C'est compliqué. :-) J'ai besoin du
div S pour des raisons qui ne sont pas évidentes de cet exemple simplifié.Les valeurs connues de la taille des polices sont-elles? Pouvez-vous faire les mathématiques et travailler le rembourrage sur les plus petits blocs de polices?
@Mathletics: pas vraiment. Le HTML est généré - imaginez un programme de conversion PDF-TO-HTML et c'est à peu près ce dont nous parlons. (Je ne sais pas non plus à l'avance quelles polices sont utilisées.)
Dupe de