CSS/WebKit:表格行的背景图像 [英] CSS/WebKit: Background Images for Table Row

问题描述

出于某种原因，当您在 Safari 和 Chrome 中将背景图像应用于 tr 时，它会将其呈现为好像该规则适用于每个 td.

火狐:

_(来源:

_{(来源:whyprime.com)}

我发现这篇文章讨论了一个修复:

将背景图像应用到表格行

我可以使用间隔 GIF 图像在 Internet Explorer 中使用它，但我无法在 Safari 中找到它.

http://www.whyprime.com/temp/table-background.html

解决方案

你的表格总是只有两行吗?如:

<tr><td></td><td></td></tr>

如果是这样，一个简单但不过分优雅的解决方案是将您的背景图像拆分为两个图像，并将 CSS 类应用于左右列，将一半的箭头应用于左侧的右侧列，以及右侧列的左侧:

<tr><td class="left"></td><td class="right"></td></tr>

你的 CSS 可能类似于:

td.left{背景:#ffffff url(../PathToLeftBackground.png) 右上角；}td.right{背景:#fffff url(../PathToRightBackground.png) 左上角；}

您也可以使用精灵图像，其中您使用一个图像并为两个背景放置不同的位置.

我意识到这可能不是最理想的解决方案，但它至少可以解决您的问题并推动您的项目.我有时会使用诸如此类的简单解决方案来取得进展，然后再重新审视问题以提高效率.

For some reason, when you apply a background image to a tr in Safari and Chrome, it renders it as if the rule applies to every td.

Firefox:

_{(Source: whyprime.com)}

Safari:

_{(Source: whyprime.com)}

I found this article discussing a fix:

Applying a background image to a table row

I was able to get it working in Internet Explorer with spacer GIF images, but I can't figure it out for Safari.

http://www.whyprime.com/temp/table-background.html

解决方案

Will your table always only have two rows? Such as:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

If so, a simple, but not overly elegant, solution would be to split your background image into two images, and apply a CSS class to the left and right column, applying half of the arrow to the right side of the left column, and to the left side of the right column:

<table>
  <tr>
    <td class="left"></td>
    <td class="right"></td>
  </tr>
</table>

Your CSS could then be similar to:

td.left
{
  background: #ffffff url(../PathToLeftBackground.png) top right;
}
td.right
{
  background: #fffff url(../PathToRightBackground.png) top left;
}

You could also use a sprite image where you use one image and position it differently for the two backgrounds.

I realize it's probably not the most ideal solution, but it would at least fix your issue and get your project moving. I sometimes use simple solutions such as this in order to make forward progress, and then revisit the problem to make it more efficient later.

这篇关于CSS/WebKit:表格行的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！