CSS设置背景颜色只是表行宽度的一个百分比 [英] CSS to set the background color for just a percentage of the width of a table row

问题描述

我有一个基本表，有两列：名称和值。我想根据值的大小来遮住表格中的每一行宽度的适当百分比（基本上创建一个横向直方图！）。我可以写代码来计算适当的百分比设置，但我不能弄清楚CSS实际上适当地阴影每行。它似乎整个行可以阴影，但不是一个百分比。这是真的吗？

I have a basic table with two columns: name and value. I'd like to shade each row in the table an appropriate percentage of the width based on the size of the value (to essentially create a sideways histogram!). I can write code to calculate the appropriate percentage to set, but I can't figure out the CSS to actually shade each row appropriately. It seems like the whole row can be shaded, but not a percentage. Is that true?

FWIW，我使用Twitter Bootstrap，如果需要，我可以使用jQuery。这只是在Chrome上运行，所以CSS3& Webkit只是很好！这是HTML。

FWIW, I'm using Twitter Bootstrap and I can use jQuery too if need be. This is only running on Chrome so CSS3 & Webkit only is fine! Here's the 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>

有关如何实现这一点的任何提示？希望这个问题有意义。

Any tips on how to make this happen? Hope this question makes sense.

推荐答案

您可以使用线性渐变。

如果百分比为40％：

table{
    background: -webkit-gradient(linear, left top, right top, color-stop(40%,#F00), color-stop(40%,#00F));
    background: -moz-linear-gradient(left center, #F00 40%, #00F 40%);
    background: -o-linear-gradient(left, #F00 40%, #00F 40%);
    background: linear-gradient(to right, #F00 40%, #00F 40%);
}

演示

因此，在JavaScript中，

So, in JavaScript,

var percentage=40,
    col1="#F00",
    col2="#00F";
var t=document.getElementById('table');
t.style.background = "-webkit-gradient(linear, left top,right top, color-stop("+percentage+"%,"+col1+"), color-stop("+percentage+"%,"+col2+"))";
t.style.background = "-moz-linear-gradient(left center,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
t.style.background = "-o-linear-gradient(left,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
t.style.background = "linear-gradient(to right,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";

Demo

如果您想将此设置应用于每一行：

If you want to apply this to each row differently:

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, left top,right top, color-stop("+percentage+"%,"+col1+"), color-stop("+percentage+"%,"+col2+"))";
    els[i].style.background = "-moz-linear-gradient(left center,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)" ;
    els[i].style.background = "-o-linear-gradient(left,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
    els[i].style.background = "linear-gradient(to right,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)" ;
}

问题是将背景设置为 tr 在Firefox和Opera上运行良好，但在Chrome上，渐变应用于每个单元格。

The problem is that setting the background to the tr works well on Firefox and Opera, but on Chrome the gradient is applied to each cell.

此问题可以通过添加此代码 http://stackoverflow.com/a/10515894 ）：

This problem can be fixed adding this code (see http://stackoverflow.com/a/10515894):

#table td {display: inline-block;}

b $ b

演示

这篇关于CSS设置背景颜色只是表行宽度的一个百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！