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?

我有一个包含两列的基本表:名称和值。我想根据值的大小为表中的每一行加上适当的宽度百分比(基本上创建一个横向直方图!)。我可以编写代码来计算要设置的适当百分比,但我无法弄清楚CSS是否能够适当地对每一行进行着色。似乎整行可以加阴影,但不是百分比。真的吗?

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.

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>

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

有关如何实现这一目标的任何提示?希望这个问题有道理。

2 个解决方案

#1

You could use linear-gradients.

您可以使用线性渐变。

If the percentage is 40%:

如果百分比是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%);
}

Demo

So, in JavaScript,

所以,在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+"%)" ;
}

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.

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

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

添加此代码可以解决此问题(请参阅https://*.com/a/10515894):

#table td {display: inline-block;}

Demo

#2

No need to use gradients. First, create a simple image file with the color that you want to shade your row with. In my case, I created a .png which is fully colored black (black.png in the example below). Now, just use the background-image and background-size properties to color the appropriate part of the row.

无需使用渐变。首先,使用要为行着色的颜色创建一个简单的图像文件。在我的例子中,我创建了一个完全着色为黑色的.png(下例中为black.png)。现在,只需使用background-image和background-size属性为行的相应部分着色。

Example, HTML:

<table cellspacing = "0px">
    <tr class = "row"><td>Hello Hello</td><td>Bye Bye</td></tr>
</table>

CSS:

.row {
    background-color: white; /*fallback color*/
    background-image: url(black.png);
    background-size: 75% 100%; /*your percentage is the first one (width), second one (100%) is for height*/
    background-repeat: no-repeat;
    color: rgb(0, 140, 200);
    font-weight: bold;
}

Result:

Here's a simple snippet on how to automate this for your example:

这是一个关于如何为您的示例自动执行此操作的简单代码:

var tbl = document.getElementsByClassName("table")[0];
var rws = tbl.rows;
for(var i = 0; i < rws.length; i ++) {
    var percentage = parseInt(rws[i].getElementsByTagName("td")[1].innerHTML, 10);
    rws[i].style.backgroundImage = "black.png";
    rws[i].style.backgroundSize = percentage + "%" + " 100%";
    rws[i].style.backgroundRepeat = "no-repeat";
    rws[i].style.color = "rgb(0, 140, 200)";
}

Little demo: percentage width bg color (non-gradient based).

小演示:百分比宽度bg颜色(基于非渐变)。

I hope that helped!

我希望有所帮助!