Question

我需要向表格单元格背景添加进度。这是小提琴：http://jsfiddle.net/kedctfmj/3/

HTML：

<table>
    <tr>
        <td>value1</td>
        <td>
            value2
            <div class="bg" style="width: 20%"/>
        </td>
        <td>value3</td>
    </tr>
    <tr>
        <td>value4</td>
        <td>
            value5
            <div class="bg" style="width: 30%"/>
        </td>
        <td>value6</td>
    </tr>
</table>

CSS：

table {
    width: 300px;
}
tr:nth-child(odd) {
    background-color: #f8f8f8;
}
td {
    border: 1px solid #ccc;
}

td {
    position: relative;
}

.bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #8ef;
    z-index: -1;
}

最接近我能够实现的是z-index：-1。但这并不适合tr的背景色。

Answer 1

为tr元素添加非常少的不透明度（以便为tr元素创建新的堆叠上下文），然后z-index: -1将按预期工作：

tr:nth-child(odd) {
    background-color: #f8f8f8;
    opacity: .999;
}
.bg {
    /* ... */
    z-index: -1;
}

演示：http://jsfiddle.net/kedctfmj/5/

可能导致IE出现问题的另一个问题是自动关闭<div />标签。这不是有效的语法，它应该有结束标记</div>：

<div class="bg" style="width: 20%"></div>

Answer 2

您是否考虑过更改.bg项目的不透明度，以便仍然可以显示该值？

使用小提琴中的代码：

.bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #8ef;
    opacity: 0.5;
    /*z-index: -1;*/ }

希望这会有所帮助......

- Lance

表格单元格内的进度条

2 个答案:

演示：http://jsfiddle.net/kedctfmj/5/