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

发布于 2024-08-11 02:33:54 字数 637 浏览 5 评论 0原文

我有一行，其中有几列。我将背景图像设置为但它会重新启动每个的背景图像，就像为每个 < 单独设置一样;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>

谢谢！！

原文

I have a row <tr> that has a few columns <td> in it. I have a background image set to the <tr> but it restarts the background image for each <td> as if it were individually set for each <td>. I would like the one image to span across the background for all the columns in that row.

Is there a way to do that?

here is my code:

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

Thanks!!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鲜肉鲜肉永远不皱 2024-08-18 02:33:54

如果你用“repeat”替换background-repeat属性，它不会改变任何东西。
事实上 TR 不支持背景，你必须以不同的方式来做。

如果你可以使用 div - 那就去吧。如果必须使用表格，请将标题移动到单独的表格并将背景应用到这个新的标题表。这并不完全正确，但可以完成工作。如果我是你，我会使用 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>

It won't change anything if you replace background-repeat property with 'repeat'.
The fact is TR does not support backgrounds and you must do it different way.

If you can use divs - go for it. If you must use table, move your header to seperate table and apply background to this new header-table. This is not perfectly correct but will do the job. If I was you I would use bar.gif graphic that I can repeat-x across all header tds.

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

回复收藏 0 原文

秋千易 2024-08-18 02:33:54

您可能需要在每个上单独设置背景位置。不支持大多数 css 属性。

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

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

当宽度不同时，这显然会变得更加复杂，并且在使用 % 宽度的情况下，您可能需要执行一些 JavaScript 来获取实际位置中间的一列。

You will probably have to set the background position separately on each <td>. <tr>s don't support most css properties.

For example, in the simple case where left and right columns are equal widths:

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

This obviously gets much more complex when you the widths are different, and in your case with % widths, you would probably have to do some javascript to get the actual location of the middle column.

回复收藏 0 原文

~没有更多了~