CSS Table de Jeu de Fond de la Cellule de la Couleur à l'Aide de Texte à l'Intérieur d'une Cellule de Tableau

Ont fondamentalement le même problème que cette - le texte a une couleur d'arrière-plan et est dans une cellule de tableau. Texte la couleur de fond est que derrière le texte, et ne pas remplir la totalité de la cellule de tableau, à qui il le doit.

La solution est normalement pour définir une couleur sur la cellule du tableau. La différence est que cela se produit dans de nombreux endroits tout au long de ce site web particulier, et de changer toutes les cellules d'un tableau serait prendre un temps très long.

Question est, est-il un moyen de dire que dans le CSS, soit de:

  1. Rendre le texte d'arrière-plan de couleur de remplissage de l'ensemble de la cellule du tableau (si le texte est dans une cellule de tableau); ou.......
  2. Si une cellule du tableau contient un élément de texte qui a du style x, puis assurez-vous que la cellule de la table ont une couleur de fond (une sorte d'héritage inverse)?

PS: le site a été développé pour IE6 à l'origine, et IE6 déjà remplit l'ensemble de la cellule du tableau avec le texte et la couleur d'arrière-plan, donc, au départ, pas de problèmes. FF et IE 7+ travailler différemment si.

InformationsquelleAutor | 2009-07-29
  1. 8

    Comme David Dorward dit, il n'y a aucun moyen de le faire exactement ce que vous voulez proprement avec du CSS, mais je peux penser à quelques solutions de contournement...

    En supposant que votre html est quelque chose comme ceci (c'est à dire la chose avec la couleur d'arrière-plan est la seule chose dans la cellule du tableau):

    <table>
    <tr>
        <td>test with longish string<br/> over two lines<td>
        <td><span class="bg" >test</span></td>
    </tr>
    <tr>
        <td>test with longish string<br/> over two lines<td>
        <td>test with longish string<br/> over two lines<td>
    </tr>
</table>

    Vous pouvez le faire à votre CSS:

    td { height: 100%;}
.bg { background-color: #f00; width: 100%; height: 100%; display: block; }

    Il fonctionne dans cet exemple simple (au moins dans firefox 3.5), mais pourrait avoir d'autres effets secondaires en fonction de ce que le contenu de votre code html ressemble.

    Modifier: une Autre option, si vous êtes ok avec le piratage via javascript, est d'utiliser jQuery comme ceci:

    $(function() { $("td:has(span.bg)").addClass("bg"); });

    Cela fonctionne sur l'exemple ci-dessus, html/css, mais serait évidemment besoin d'être modifiée pour correspondre à vos classes css, etc.

    • Merci pour ce - pouvez voir pourquoi il devrait fonctionner, mais pas de la joie pour notre configuration particulière (nous avons d'ancrage des balises au lieu de les travées dans les cellules de la table, je ne sais pas si ce qui compte). N'en dirai pas plus pour l'instant un motif de plus pour redévelopper l'application en particulier.
    InformationsquelleAutor Alconja
  2. 0

    Pas.

    CSS, actuellement, au moins, n'a aucun moyen de style d'un élément basé sur tout ce qui s'affiche après le début de la balise de l'élément dans le document. Si vous ne pouvez pas le style d'un élément basé sur son contenu.

    InformationsquelleAutor Quentin
  3. 0

    Bien Si vous voulez juste un ensemble de cellules couvertes, cela ne nécessite pas de css, sauf si vous souhaitez l'utiliser:

    <table width="100" height="100" border="2">
<tbody>
<tr>
<td bgcolor='red'>This is Red</td>
</tr>
<tr>
<td bgcolor='blue'>This is Blue</td>
</tr>
</tbody>
</table>

    Il fonctionne dans FireFox et IE8 et 7. Il couvre l'intégralité de la cellule, même si le texte ne tient pas.

    • À partir de la question: "La solution est normalement pour définir une couleur sur la cellule du tableau. La différence est que cela se produit dans de nombreux endroits tout au long de ce site web particulier, et de changer toutes les cellules d'un tableau serait prendre un temps très long."
    InformationsquelleAutor Tony C