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

Posted 2023-03-06

【中文标题】CSS设置背景颜色只是表格行宽度的百分比

【英文标题】：CSS to set the background color for just a percentage of the width of a table row

【发布时间】：2012-08-14 19:31:36

【问题描述】：

我有一个包含两列的基本表：名称和值。我想根据值的大小为表格中的每一行加上适当的宽度百分比（本质上是创建一个横向直方图！）。我可以编写代码来计算要设置的适当百分比，但我无法计算出 CSS 以适当地对每一行进行实际着色。似乎整行都可以着色，但不是百分比。这是真的吗？

对于它的价值，我正在使用 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>

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

【问题讨论】：

如果解决方案是 CSS3 特定的，它会起作用吗？

你应该看看渐变，我不确定具体是怎么做的，但我知道在渐变中你可以这样做，然后使用 jquery 修改 .attr()

【参考方案1】：

无需使用渐变。首先，创建一个简单的图像文件，使用您想要为行着色的颜色。在我的例子中，我创建了一个全黑色的.png（在下面的示例中为black.png）。现在，只需使用 background-image 和 background-size 属性为行的适当部分着色。

示例，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;

结果：

下面是一个简单的 sn-p，说明如何为您的示例自动执行此操作：

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)";

小演示：percentage width bg color (non-gradient based).

希望对你有所帮助！

【讨论】：

这真的很酷。但由于某种原因，每个单元格都被 75% 的阴影覆盖（在两列中）。与您的屏幕截图不同，它没有跨越整个宽度。我会继续四处寻找，因为你的例子似乎有效！

@tonic 这是 Chrome 的错误，我在最后一次编辑我的答案时修复了它。

@tonic 您需要将position: relative; display: block; 添加到行中才能与 Chrome 一起使用。这是使用background-image 时的一个已知问题。请参阅我的演示，它也适用于 Chrome。

@tonic 还注意到我的 javascript 代码中有错字。现在检查一个有效的演示和更正的代码。

对于 jsfiddle，这是一个有效的黑色像素：delhisweetcentre.co.uk/pics/black-pixel.jpg

【参考方案2】：

你可以使用线性渐变。

如果百分比是 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://***.com/a/10515894）：

#table td display: inline-block;

Demo

【讨论】：

谢谢！但是，这会使整个表格变暗。每一行都需要不同的阴影百分比。我该如何调整这段代码来做到这一点？

@tonic，只需选择 tr 而不是整个表格。

感谢@oriol 的编辑！在您添加的编辑中，我注意到整个行在 jsfiddle 中没有阴影，而只是名称单元格。是否可以将整行遮蔽一定百分比？

@tonic 检查我的答案是否有非梯度解决方案。

我将其应用于现有表，但是当我到达以 els[i].style.background 部分开头的四行时，IE 一直说这是一个“无效参数”。 Firefox 和 Chrome 似乎没有问题（正如预期的那样）。有人有建议吗？