CSS: Zeilen Hintergrundspannweite alle Spalten abrufen?

Question

Ich habe eine Reihe <tr> Das hat ein paar Spalten <td> drin. Ich habe ein Hintergrundbild auf dem <tr> Aber es startet das Hintergrundbild für jeden neu <td> Als ob es für jeden einzeln eingestellt wäre <td>. Ich möchte, dass das eine Bild für alle Spalten in dieser Zeile über den Hintergrund erstreckt.

Gibt es eine Möglichkeit, das zu tun?

Hier ist mein 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>

Vielen Dank!!

Answer 1

Es wird nichts ändern, wenn Sie die Eigenschaft mit der Hintergrundrepeat durch "Wiederholung" ersetzen. Tatsache ist, dass TR keine Hintergründe unterstützt und Sie es anders machen müssen.

Wenn Sie Divs verwenden können, machen Sie es. Wenn Sie die Tabelle verwenden müssen, verschieben Sie Ihren Header in die Tisch und wenden Sie den Hintergrund auf diesen neuen Header-Tisch an. Dies ist nicht vollkommen korrekt, wird aber den Job erledigen. Wenn ich Sie wäre, würde ich eine bar.gif-Grafik verwenden, die ich in allen Header-TDs wiederholen kann.

<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

Sie müssen die Hintergrundposition wahrscheinlich auf jeden einzeln einstellen <td>. <tr>S unterstützen die meisten CSS -Eigenschaften nicht.

Zum Beispiel in dem einfachen Fall, in dem linke und rechte Spalten gleiche Breiten sind:

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

Dies wird offensichtlich viel komplexer, wenn Sie die Breite unterschiedlich sind, und in Ihrem Fall mit % Breite müssten Sie wahrscheinlich ein JavaScript machen, um den tatsächlichen Ort der mittleren Spalte zu erhalten.