CSS：すべての列を列に渡す列の背景スパンを作成しますか？

Question

列があります <tr> それにはいくつかの列があります <td> 初期化。に設定された背景画像があります <tr> ただし、それぞれの背景画像を再起動します <td> それぞれに個別に設定されているかのように <td>. 。その行のすべての列の背景を1つの画像にまたがってもらいたいと思います。

それをする方法はありますか？

これが私のコードです：

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

ありがとう！！

Answer 1

バックグラウンドリピートプロパティを「繰り返し」に置き換えても、何も変更しません。実際、TRは背景をサポートしておらず、別の方法で行う必要があります。

divを使用できる場合は、それを求めてください。テーブルを使用する必要がある場合は、ヘッダーを移動してテーブルを分離し、この新しいヘッダーテーブルに背景を適用します。これは完全に正しくありませんが、仕事をします。もし私があなただったら、私はすべてのヘッダーTDで繰り返すことができる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>

Answer 2

おそらく、それぞれにバックグラウンド位置を個別に設定する必要があります <td>. <tr>sほとんどのCSSプロパティをサポートしません。

たとえば、左列と右の列が等しい幅である単純な場合：

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

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