html - 表格单元格内的进度条

标签 html css

<分区>

我需要在表格单元格背景中添加进度。这是 fiddle :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 的背景色搭配效果不佳。

最佳答案

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>

关于html - 表格单元格内的进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27508962/

相关文章:

html - 如何更改 HTML 框角的颜色?

html - 覆盖所有类似于 !important 的属性

html - 通过隔行扫描加载图像 - 从低分辨率到全分辨率 - HTML

filter - IE9滤镜渐变和border-radius冲突

html - Bootstrap 页脚在缩放时上升

html - 如何在 flexbox 中的元素周围创建边框

html - 表行 : only bottom border is styled 中的顶部和底部边框

html - 我希望 float 的左侧 div 在移动设备上调整宽度

javascript - Foundation 6 关闭 Canvas 菜单

css - 请帮助按按钮与 CSS 对齐