我有一个包含两列的基本表：名称和值.我想根据值的大小(基本上创建一个横向直方图！)来遮蔽表中的每一行宽度的适当百分比.我可以编写代码来计算适当的百分比来设置,但是我无法弄清楚CSS实际上适当地遮蔽每一行.看起来整行可以是阴影,但不是百分比.真的吗？
FWIW,我正在使用Twitter Bootstrap,如果需要,我也可以使用jQuery.这只是在Chrome上运行,所以CSS3& Webkit只是很好！这是HTML.
<table class="table">
<tbody class="lead">
<tr>
<td>
Joe
</td>
<td>
10
</td>
</tr>
<tr>
<td>
Jane
</td>
<td>
20
</td>
</tr>
<tr>
<td>
Jim
</td>
<td>
2
</td>
</tr>
</tbody>
</table>
有关如何使这种情况发生的任何提示？希望这个问题有道理.
解决方法
您可以使用线性梯度.
如果百分比是40％：
table{
background: -webkit-gradient(linear,left top,right top,color-stop(40%,#F00),#00F));
background: -moz-linear-gradient(left center,#F00 40%,#00F 40%);
background: -o-linear-gradient(left,#00F 40%);
background: linear-gradient(to right,#00F 40%);
}
所以,在JavaScript中,
var percentage=40,col1="#F00",col2="#00F";
var t=document.getElementById('table');
t.style.background = "-webkit-gradient(linear,color-stop("+percentage+"%,"+col1+"),"+col2+"))";
t.style.background = "-moz-linear-gradient(left center,"+col1+" "+percentage+"%,"+col2+" "+percentage+"%)";
t.style.background = "-o-linear-gradient(left,"+col2+" "+percentage+"%)";
t.style.background = "linear-gradient(to right,"+col2+" "+percentage+"%)";
如果要将其应用于每一行的方式不同：
var col1="#F00",col2="#00F";
var els=document.getElementById('table').getElementsByTagName('tr');
for (var i=0; i<els.length; i++) {
var percentage = Number(els[i].getElementsByTagName('td')[1].firstChild.nodeValue);
els[i].style.background = "-webkit-gradient(linear,"+col2+"))";
els[i].style.background = "-moz-linear-gradient(left center,"+col2+" "+percentage+"%)" ;
els[i].style.background = "-o-linear-gradient(left,"+col2+" "+percentage+"%)";
els[i].style.background = "linear-gradient(to right,"+col2+" "+percentage+"%)" ;
}
问题是将背景设置为tr可以很好地在Firefox和Opera上运行,但是在Chrome上,渐变应用于每个单元格.
这个问题可以修复添加这个代码(参见https://stackoverflow.com/a/10515894)：
#table td {display: inline-block;}
