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

Question

我有一个包含两列的基本表:名称和值。我想根据值的大小为表中的每一行设置适当的宽度百分比(实质上创建一个横向直方图!)。我可以编写代码来计算要设置的适当百分比，但我无法找出 CSS 来适本地为每一行添加阴影。似乎整行都可以加阴影，但不能加阴影。是真的吗？

就其值(value)而言，我正在使用 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>

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

Answer 1

您可以使用线性渐变。

如果百分比是 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

所以，在 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

---

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

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 上，渐变应用于每个单元格。

这个问题可以通过添加这段代码来解决(参见 https://stackoverflow.com/a/10515894 ):

#table td {display: inline-block;}

Demo