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

概述我需要向表格单元格背景添加进度.这是小提琴： http://jsfiddle.net/kedctfmj/3/ HTML： <table> <tr> <td>value1</td> <td> value2 <div class="bg" style="width: 20%"/> </td> 我需要向表格单元格背景添加进度.这是小提琴： http://jsfiddle.net/kedctfmj/3/

HTML：

<table>    <tr>        <td>value1</td>        <td>            value2            <div  />        </td>        <td>value3</td>    </tr>    <tr>        <td>value4</td>        <td>            value5            <div  />        </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  ></div>

总结

以上是内存溢出为你收集整理的html – 表格单元格内的进度条全部内容，希望文章能够帮你解决html – 表格单元格内的进度条所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。