背景图像

Question

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

我已经尝试了许多不同的方法来尝试解决这个问题，并且尚未找到有效的解决方案。

W3C表示您无法在<TR>标签上放置背景图片。这需要改变。

我尝试过的一个解决方案是将<div>放在第一个<td>内并使用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;
}

这达到了一定程度。问题是它还将图像放在滚动包装器隐藏的行上，图像不会随表格滚动。

我认为我还可以将图像分成几段并将它们放在单个单元格中，但这不会起作用，因为我需要在几个表格中使用，并且单元格在表格中不是固定的宽度。 / p>

哦，这需要在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

我想出了一个流体表的解决方法。它涉及插入一个虚拟的＆＃39;实际行上方的行，包含单个单元格，其中包含呈现背景图像的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>