CSS: сделать фоновый охват строки по всем столбцам? - PullRequest
Новая
       7

CSS: сделать фоновый охват строки по всем столбцам?

2 голосов
/ 13 ноября 2009

У меня есть строка <tr>, в которой есть несколько столбцов <td>. У меня установлено фоновое изображение на <tr>, но оно перезапускает фоновое изображение для каждого <td>, как если бы оно было индивидуально установлено для каждого <td>. Мне бы хотелось, чтобы одно изображение охватывало фон для всех столбцов в этой строке.

Есть ли способ сделать это?

вот мой код: 

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

Спасибо !!

Ответы [ 2 ]

3 голосов
/ 13 ноября 2009

Ничего не изменится, если вы замените свойство background-repeat на 'repeat'. Дело в том, что TR не поддерживает фоны, и вы должны сделать это по-другому.

Если вы можете использовать div - пойти на это. Если вам нужно использовать таблицу, переместите заголовок в отдельную таблицу и примените фон к этой новой таблице заголовков. Это не совсем правильно, но сделает работу. Если бы я был тобой, я бы использовал графику bar.gif, которую я мог бы повторить -x во всех tds заголовков. 

<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>
0 голосов
/ 13 ноября 2009

Возможно, вам придется установить положение фона отдельно для каждого <td>. <tr> s не поддерживает большинство свойств CSS.

Например, в простом случае, когда левый и правый столбцы имеют одинаковую ширину: 

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

Это, очевидно, становится намного сложнее, когда ширина отличается, и в вашем случае с% widths вам, вероятно, придется сделать некоторый JavaScript, чтобы получить фактическое расположение среднего столбца.

...