Discussion :

[spikto]

Bonjour,

Après plusieurs jours de recherche, je n'ai toujours pas trouver la solution. J'espère que vous allez pouvoir m'aider un peu.

J'ai des tableaux de données derrière lequel je dois mettre des dégradés (donc obliger de passer par une image), le problème est que ceci marche très bien sous l'environnement Windows, mais concernant l'environnement mac donc safari, et chrome (firefox sa fonctionne), l'image de fond est répété à chaque case, ce qui n'est pas très beau visuellement.

Voici un exemple simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
#tableau {
 width:100%;
}
#tableau tr {
 background-image:url("chemin de l'image");
}
 
<table id="tableau">
<tr>
 <td></td><td></td><td></td>
</tr>
<tr>
 <td></td><td></td><td></td>
</tr>
</table>

Au final, chaque ligne devrai avoir l'image en fond sur tout le long ce qui n'est pas le cas sous safari et chrome mac.

Si quelqu'un avait une petite piste pour essayer de remédier au problème, je vous en serait très reconnaissant.

[tibotibo69]

Essaye comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#tableau {
 width:100%;
}
#tableau tr {
 background-image:url("chemin de l'image") no-repeat;
}

Je n'ai pas de mac, donc je n'ai pas de visuel.

[spikto]

Pareil que l'on mette la total ou non

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
background:url("chemin de l'image") no-repeat 0 0;

[spikto]

A voir qu'il n'y a pas d'autre réponses, je suppose qu'il n'existe pas de solution, seulement un changement de design, ou faire un tableau en fond qui lui aurai qu'une case.

Dommage

[Bovino]

Peut-être (je n'ai pas de mac, dont je ne peux pas tester) un héritage différent selon la config... Essaye peut-être en rajoutant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#tableau td {
 background-image:none;
}

[spikto]

Bonne idée mais toujours même problème

[Nycoala]

Ce n'est pas ce à quoi on penserait de prime abord, mais ça fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
#tableau {
     width:100%;
}
.cellule1 {
     background-image: url("chemin de l'image");
     background-position: 0 0;
}
.cellule2 {
     background-image: url("chemin de l'image");
     background-position: 50% 0;
}
.cellule3 {
     background-image: url("chemin de l'image");
     background-position: 100% 0;
}
 
<table id="tableau">
     <tr>
          <td class="cellule1"></td>
          <td class="cellule2"></td>
          <td class="cellule3"></td>
     </tr>
     <tr>
          <td class="cellule1"></td>
          <td class="cellule2"></td>
          <td class="cellule3"></td>
     </tr>
</table>

L'idée est de décaler l'image de fond en fonction de la cellule où elle se trouve.
J'ai trouvé cette solution à cette adresse : http://www.plexusweb.com/staff/colin...on-a-table-row