CSS: Faire de la plage de ligne de ligne réapparaît toutes les colonnes?

Question

J'ai une rangée <tr> qui a quelques colonnes <td> en elle. J'ai une image d'arrière-plan définie sur le <tr> mais il redémarre l'image d'arrière-plan pour chacun <td> comme s'il était défini individuellement pour chacun <td>. J'aimerais que la seule image s'étende sur l'arrière-plan pour toutes les colonnes de cette ligne.

Y-a-t-il un moyen de faire ça?

Voici mon code:

<tr bgcolor="#993333" style="color:#ffffff; background:url(images/customer_orders/bar.gif) no-repeat;">
    <td><strong>Product(s)</strong></td>
    <td width="7%"><div align="center"><strong>Qty</strong></div></td>
    <td width="11%"><div align="center"><strong>Total</strong></div></td>
</tr>

Merci!!

Answer 1

Il ne changera rien si vous remplacez la propriété de répétition d'arrière-plan par «répéter». Le fait est que TR ne prend pas en charge les arrière-plans et vous devez le faire de manière différente.

Si vous pouvez utiliser des divs - allez-y. Si vous devez utiliser la table, déplacez votre en-tête vers une table séparée et appliquez l'arrière-plan à cette nouvelle table d'en-tête. Ce n'est pas parfaitement correct mais fera le travail. Si j'étais vous, j'utiliserais un graphique BAR.gif que je peux répéter-x sur tous les tds d'en-tête.

<table style="background:#993333 url('images/customer_orders/bar.gif'); color:#fff;">
    <tr>
        <th>Product(s)</th>
        <th>Qty</th>
        <th>Total</th>
    </tr>
</table>
<table>
    <tr>
        <td>data1</td>
        <td>tdata2</td>
        <td>data3</td>
    </tr>
</table>

Answer 2

Vous devrez probablement définir la position d'arrière-plan séparément sur chaque <td>. <tr>S ne prend pas en charge la plupart des propriétés CSS.

Par exemple, dans le cas simple où les colonnes gauche et droite sont des largeurs égales:

tr td{ background-position: center; }
tr td:first-child { background-position: left; }
tr td:last-child { background-position: right; }   

Cela devient évidemment beaucoup plus complexe lorsque les largeurs sont différentes, et dans votre cas avec% de largeurs, vous devrez probablement faire du javascript pour obtenir l'emplacement réel de la colonne du milieu.