Pouvons-nous résoudre le problème d'image d'arrière-plan des lignes de tableau, en chrome, dans les tableaux multicellulaires?

Question

Il est fréquemment demandé – mais je n'ai pas vu une bonne réponse pour l'instant (et j'ai regardé). Si vous définissez une image de fond en CSS à une ligne de la table - l'image se répète dans chaque cellule. Si vous définissez l' position: relative (pour la ligne) et de régler l' background-image: none (pour les cellules), il résout le problème sur IE mais pas sur chrome! Je ne peux pas utiliser le fond de positionnement car il existe de nombreux appels et leur taille varie. (Et la photo n'est pas symétrique - C'est un fondu d'un seul côté. Quelqu'un??

Exemple pour le code css :

tr { height: 30px; position:relative;}
tr.green { background: url('green_30.png') no-repeat left top; }
tr.orange { background: url('oranger_30.png') no-repeat left top;}
tr.red { background: url('red_30.png') no-repeat left top; }
td { background-image: none; }

Le HTML de base - Un multi cellule de tableau.

Le but est d'avoir des couleurs différentes fondu dans chaque rangée, mais cela pourrait être un non-modèle d'image.

Answer 1

Ok, j'ai passé les âges de la lecture à ce sujet, et je ne pouvais pas trouver une solution facile pour tous les navigateurs, mais comme je vois que vous êtes à l'aide de hauteur fixe les lignes, j'ai développé ma propre solution de contournement: http://jsfiddle.net/DR8bM/

En gros, au lieu de mettre l'image de fond sur la ligne, vous le mettez sur une absolue placé div dans la première cellule de chaque ligne (et de l'étendre à remplir l'ensemble de la ligne). C'est un peu hacky, mais peut-être le seul moyen fiable d'obtenir ce que vous voulez.

Answer 2

Ajouter float: à gauche de la ligne, cela devrait le corriger.

 tr {float:left;}