Pour une raison quelconque, lorsque vous appliquez une image d'arrière-plan à une TR dans Safari et Chrome, il le rend comme si la règle s'applique à chaque TD.
Firefox:
(source: whyprime.com )
Safari:
(source: whyprime.com )
J'ai trouvé cet article discuter d'une solution:
Appliquer une image d'arrière-plan à une ligne de table
J'ai pu le faire fonctionner dans Internet Explorer avec des images spacer gif, mais je ne peux pas le comprendre pour Safari.
3 Réponses :
Votre table n'a toujours que deux rangées? Tels que: Si tel est le cas, une solution simple, mais pas trop élégante, serait de scinder votre image d'arrière-plan en deux images et d'appliquer une classe CSS à la colonne gauche et droite, appliquer la moitié de la flèche sur le côté droit de la colonne gauche et sur le côté gauche de la colonne de droite: Votre CSS pourrait alors être similaire à: Vous pouvez également utiliser une image Sprite où vous utilisez une image et la positionner différemment pour les deux arrière-plans. Je me rends compte que ce n'est probablement pas la solution la plus idéale, mais Cela permettrait au moins de réparer votre problème et de faire bouger votre projet. J'utilise parfois des solutions simples telles que celles-ci afin de faire des progrès en avant, puis de revenir sur le problème pour le rendre plus efficace plus tard.
Ah je suppose que ce serait la façon dont vous feriez traditionnellement des images de fond pour une table. Cela fait si longtemps que je devais goûter sérieusement une table avec des antécédents tranchés et tout ce que je n'avais même pas pensé à cela. J'ai pu atténuer les problèmes d'affichage dans les navigateurs Webkit en positionnant les valeurs X / Y, mais à l'avenir, ce sera l'itinéraire que je vais prendre et utiliser JavaScript appliquer dynamiquement les styles d'arrière-plan appropriés pour garder le balisage propre et simple. . Je vais marquer comme répondit pour la bonne conseil et la solution fonctionnelle. Merci mec!
Par défaut, les TR et TD ont des propriétés d'affichage des propriétés de la table et de la rangée de table. Nous avons besoin d'eux pour l'oublier et sentez-vous comme des éléments de blocs simples: Ce code a résolu le problème du rendu pour moi.
Merci à moi une solution parfaite avec un ajout du piratage WebKit @Media CSS. "Écran @media et (-Webkit-min-périphérique-Device-Pixel-Ratio: 0) {TR {Affichage: Bloc;} TD {Affichage: Inline-Block; Largeur: 195px}} '
Merci à votre solution Rocks sur We CSS, ça sauve beaucoup de mon temps.
Vous pouvez utiliser "fond-attachement: fixe" pour résoudre ce problème.
tr.bg {
background-image : url(../PathToLeftBackground.png) repeat-y 50px 0px;
background-attachment: fixed;
}
Jamais défilé avec ça? C'est un peu drôle
Merci pour votre idée. J'ai passé 1 semaine à la recherche d'une bonne solution de fond dégradé TR Table. Je vous remercie.
Cela a sauvé ma vie de fdn. JE T'AIME.
Cela devrait être marqué comme la réponse puisqu'elle ne s'appuie pas sur les solutions de contournement
Cela corrige l'image à l'arrière-plan de la page, pas la ligne de table. Alors fonctionnerait pour par ex. un motif répétitif qui n'a pas de départ ou de fin spécifique mais pas pour aucun arrière-plan qui doit être aligné sur la table elle-même
Et votre code serait où?