HTML表单元格部分背景填充 [英] HTML table cell partial background fill

问题描述

我有一个表，它有一个显示％值的列。为了使它更具视觉吸引力，我想显示对应于％值的线性渐变背景（例如50％将填充单元格的一半宽度）。

I have a table that has a column that shows a % value. To make it more visually appealing, I'd like to display a linear gradient background that corresponds to the % value (e.g. 50% would fill half of the width of the cell).

我想出了如何使用渐变背景（使用ColorZilla的渐变生成器），但不知道如何设置背景填充的宽度....

I figured out how to make gradient background (using ColorZilla's gradient generator) but don't know how to set the width of the background fill....

当前代码：

<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td width="100" style="background: linear-gradient(to right, rgba(0,150,0,1) 0%,rgba(0,175,0,1) 17%,rgba(0,190,0,1) 33%,rgba(82,210,82,1) 67%,rgba(131,230,131,1) 83%,rgba(180,221,180,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */">50%</td>
    </tr>
</table>

推荐答案

只需根据百分比设置 background-size 值，如下面的代码段所示。如果渐变是水平的，则在X轴上更改大小以匹配百分比值，或者如果渐变是垂直的，则在Y轴上更改大小。

It is pretty simple. Just set the background-size value based on percentage like in the below snippet. If the gradient is horizontal then change the size in X-axis to match the percentage value or if gradient is vertical then change the size in Y-axis.

对于负值将渐变的方向从向右改变为到左并设置 100％100％ / code>作为 background-position 的值以使其正确对齐。

For negative values change the direction of gradient from to right to to left and set 100% 100% as value for background-position to get it right aligned.

内联样式仅用于因为您需要通过JS设置它以匹配％值。这不能用CSS。

(Inline styles are used only because you'd need to set it via JS to match the % value. This cannot be done with CSS.)

td {
  width: 25%;  /* only for demo, not really required */
  background-image: linear-gradient(to right, rgba(0, 150, 0, 1) 0%, rgba(0, 175, 0, 1) 17%, rgba(0, 190, 0, 1) 33%, rgba(82, 210, 82, 1) 67%, rgba(131, 230, 131, 1) 83%, rgba(180, 221, 180, 1) 100%);  /* your gradient */
  background-repeat: no-repeat;  /* don't remove */
}
td.negative {
  background-image: linear-gradient(to left, rgba(0, 150, 0, 1) 0%, rgba(0, 175, 0, 1) 17%, rgba(0, 190, 0, 1) 33%, rgba(82, 210, 82, 1) 67%, rgba(131, 230, 131, 1) 83%, rgba(180, 221, 180, 1) 100%);  /* your gradient */
  background-position: 100% 100%;
}  
/* just for demo */

table {
  table-layout: fixed;
  width: 400px;
}
table, tr, td {
  border: 1px solid;
}

<table>
  <tr>
    <td style='background-size: 90% 100%'>90%</td>
    <td style='background-size: 50% 100%'>50%</td>
    <td style='background-size: 20% 100%'>20%</td>
    <td style='background-size: 100% 100%'>100%</td>
  </tr>
  <tr>
    <td style='background-size: 90% 100%' class='negative'>-90%</td>
    <td style='background-size: 50% 100%' class='negative'>-50%</td>
    <td style='background-size: 20% 100%' class='negative'>-20%</td>
    <td style='background-size: 100% 100%'>100%</td>
  </tr>  
</table>

这篇关于HTML表单元格部分背景填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！