Question

我有一行<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>

谢谢！

Answer 1

如果用“repeat”替换background-repeat属性，它将不会改变任何内容。事实是TR不支持背景，你必须采用不同的方式。

如果你可以使用div-去吧。如果必须使用表，请将标题移动到单独的表并将背景应用于此新标题表。这不是完全正确的，但会完成这项工作。如果我是你，我会使用bar.gif图形，我可以在所有标题tds中重复x。

<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>不支持大多数css属性。

例如，在左右列宽度相等的简单情况下：

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

当宽度不同时，这显然会变得复杂得多，而在你的情况下，使用％widths，你可能需要做一些javascript来获得中间列的实际位置。

CSS：使行背景跨越所有列？

2 个答案: