<tr> 上的背景图像

Question

我有一个包含 13 列和未知行数的表，可能是 1，可能是 50+。该表还包裹在滚动包装器中，因此一次只能看到 4 行。某些行需要具有跨越整行的文本“EXPIRED”的背景图像。

我尝试了许多不同的方法来尝试解决这个问题，但还没有找到可行的解决方案。

W3C 说您不能在 <TR> 标记上放置背景图像。这需要改变。

我尝试的一个解决方案是在第一个 <td> 中放置一个 <div> 并使用 CSS 绝对定位它：

<table style="empty-cells:show" class="wiTable">
<tr><td><div class="expired"></div></td>
</table>

.expired {
    background:url("/images/Expired.png") no-repeat left top;
    position: absolute;
    left: 0;
    width: 900px;
    height: 26px;
    z-index: 0;
}

这在一定程度上奏效了。问题是它还将图像放置在被滚动包装器隐藏的行上，并且图像没有随表格滚动。

我想我也可以将图像分成几段并将它们放在单独的单元格中，但这不起作用，因为我需要在多个表格上使用它，并且表格中的单元格不是固定的宽度。

哦，这需要在 IE8 中工作，因为这是我正在使用的环境。

这里是一个绝对定位结果的例子：

Answer 1

使用伪类，您可以使用第一个子 TD 而不是 TR 来做一些诡计。这还假设您的表格具有固定宽度，并且每行具有固定高度。这不适用于可变宽度，不过，如果需要，您可以为某些媒体断点输入调整后的宽度。

JS Fiddle Demo

精简 HTML 标记

<div class="container">
    <table>
        <tr>
            <td>Model</td>
            <td>Make</td>
            <td>Miles</td>
            <td>Year</td>
            <td>Options</td>
            <td>Price</td>
        </tr>
        <tr class="expired">
            <td>Model</td>
            <td>Make</td>
            <td>Miles</td>
            <td>Year</td>
            <td>Options</td>
            <td>Price</td>
        </tr>
        <tr class="expired">
            <td>Model</td>
            <td>Make</td>
            <td>Miles</td>
            <td>Year</td>
            <td>Options</td>
            <td>Price</td>
        </tr>
    </table>
</div>

CSS

.container {
    overflow-y: scroll;
    height: 115px;
}

table {
    color: #fff;
    width: 500px;
    border-collapse: collapse;
}

table tr.expired {
    position: relative;
}

table tr.expired td:first-child:before {
    content: "";
    position: absolute;
    width: 500px;
    height: 30px;
    z-index: -100;
    top: 0;
    left: 0;
    /*background: red;*/
    background: url('http://lorempixel.com/output/nightlife-q-c-640-480-3.jpg');
}

table tr.expired td {
    z-index: 100;
    position: relative;
    background: transparent !important;
}

table tr td {
    padding: 5px;
    background: #999;
}

table tr:nth-child(odd) td {
    background: #ccc;
}

Answer 2

我想出了一个流体表的解决方法。它涉及在实际行上方插入一个“虚拟”行，其中包含一个单元格，其中包含一个呈现背景图像的 div。 div 使用设置为背景图像高度的负下边距来与其下方的“真实”行重叠。在我的示例中完美像素。

CSS：

tr.gradient td div{
    width: 100%;
    height: 28px;    
    margin: 0 0 -28px 0;
    background: #000 url(/pics/table_head.png) repeat-y top left;
    color: #FFF;
    background-size: 100%;
    padding:0;
}

HTML：

<table>
   <tr class="gradient"><td colspan="2"><div>&nbsp;</div></td></tr>
    <tr>
        <th>Strengths</th>
        <th>Weaknesses</th>
    </tr>
    <tr>
        <td>
            whatever</td>
        <td>
            whatever</td>
    </tr>
  <tr class="gradient"><td colspan="2"><div>&nbsp;</div></td></tr>
    <tr>
        <th>Opportunities</th>
        <th>Threats</th>
    </tr>
    <tr>
        <td>
            whatever</td>
        <td>
            whatever</td>
    </tr>
</table>