CSS 为表格行的宽度的百分比设置背景颜色

问题描述

我有一个包含两列的基本表:名称和值.我想根据值的大小为表格中的每一行添加适当的宽度百分比(基本上创建一个横向直方图！).我可以编写代码来计算要设置的适当百分比，但我无法弄清楚 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?

就其价值而言，我正在使用 Twitter Bootstrap，如果需要，我也可以使用 jQuery.这仅在 Chrome 上运行，所以 CSS3 &只有 Webkit 没问题！这是 HTML:

For what it's worth, 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%:

If the percentage is 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+"%)";

演示

如果您想以不同的方式将其应用于每一行:

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.

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

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

#table td {display: inline-block;}

演示

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