2

<tr>いくつかの列を含む行があります<td>。背景画像を に設定していますが、それぞれに個別に設定されているかのように<tr>、それぞれの背景画像を再起動します。その行のすべての列の背景に 1 つの画像がまたがるようにしたいと思います。<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>

ありがとう！！

4

2 に答える 2

3

background-repeat プロパティを「repeat」に置き換えても何も変わりません。実際、TR は背景をサポートしていないため、別の方法で行う必要があります。

div を使用できる場合は、それを使用してください。テーブルを使用する必要がある場合は、ヘッダーを別のテーブルに移動し、この新しいヘッダー テーブルに背景を適用します。これは完全に正しいわけではありませんが、うまくいきます。私があなただったら、すべてのヘッダー tds で x を繰り返すことができる bar.gif グラフィックを使用します。

<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>
于 2009-11-13T17:04:10.640 に答える
0

おそらく、各 で個別に背景位置を設定する必要があります<td>。<tr>s は、ほとんどの CSS プロパティをサポートしていません。

たとえば、左右の列の幅が等しい単純なケースでは、次のようになります。

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

幅が異なる場合、これは明らかにはるかに複雑になります。幅が % の場合、中央の列の実際の位置を取得するには、おそらく JavaScript を実行する必要があります。

于 2009-11-13T16:46:10.603 に答える