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

StackOverflow https://stackoverflow.com/questions/1730436

  •  20-09-2019
  •  | 
  •  

Вопрос

У меня есть ряд <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>

Спасибо!!

Это было полезно?

Решение

Это ничего не изменит, если вы замените свойство повторного зановости на фоне «повторение». Дело в том, что TR не поддерживает фон, и вы должны делать это по -другому.

Если вы можете использовать DOV - сделайте это. Если вы должны использовать таблицу, переместите свой заголовок в отдельную таблицу и примените фон на этот новый заголовок. Это не совсем правильно, но сделает работу. Если бы я был вами, я бы использовал Graphic 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>

Другие советы

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top