CSS: ¿Hacer que la fila de fondo sea acuática a todas las columnas?

Question

Tengo una fila <tr> que tiene algunas columnas <td> en eso. Tengo una imagen de fondo establecida en el <tr> pero reinicia la imagen de fondo para cada <td> como si estuviera establecido individualmente para cada <td>. Me gustaría que la única imagen abarque el fondo para todas las columnas en esa fila.

¿Hay una manera de hacer eso?

Aquí está mi código:

<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>

¡¡Gracias!!

Answer 1

No cambiará nada si reemplaza la propiedad de repetición de fondo con 'repetir'. El hecho es que TR no admite fondos y debe hacerlo de manera diferente.

Si puedes usar Divs, hazlo. Si debe usar la tabla, mueva su encabezado a la tabla separada y aplique antecedentes a esta nueva mesa de encabezado. Esto no es perfectamente correcto, pero hará el trabajo. Si yo fuera tú, usaría Bar.gif Graphic que puedo repetir-x en todos los TD de encabezado.

<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

Probablemente tendrá que establecer la posición de fondo por separado en cada <td>. <tr>S no admite la mayoría de las propiedades CSS.

Por ejemplo, en el caso simple donde las columnas izquierda y derecha son anchos iguales:

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

Obviamente, esto se vuelve mucho más complejo cuando los anchos son diferentes, y en su caso con % anchos, probablemente tenga que hacer un JavaScript para obtener la ubicación real de la columna central.