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不支持背景，您必须以不同的方式做。

如果您可以使用divs-请去。如果您必须使用表格，请将标题移动到单独的表格，并将背景应用于此新的标头桌。这不是完全正确的，但可以完成工作。如果我是您，我将使用bar.gif图形，可以在所有标题TD上重复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>

其他提示

您可能必须在每个方面分别设置背景位置 <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