2

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

谢谢！！

4

2 回答 2

3

如果您将 background-repeat 属性替换为“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>
于 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 回答