Html 如何设置表列的样式，例如为列着色，指定列的宽度？

我想设计一个表格的样式，我的意思是我想设计一个列的样式，该列根据数据指定宽度，颜色也基于数据

<table class="table">
 <thead>
 <th scope="col">Price of buy orders(BTC)</th>
  <th scope="col">Amount of buy orders(<%=@currency_id%>)</th>
   <th scope="col">Date of buy orders</th>
   </tr>
  </thead>
    <tbody>
   <%if @buy_orders.present?%>
    <%@buy_orders.each do |buy|%>
      <tr>
        <td class="table-default"><%=buy.price%></td>

        <td class="table-default"><%=buy.amount%>
          <div style="background: blue;"></div>
        </td>
        <td class="table-default"><%=buy.created_at%></td>
      </tr>
   <%end%>
  <%end%>
  </tbody>
</table>

---

我尝试了下面的代码，但没有成功。

不确定您到底想做什么，以及使用什么语言处理HTML。无论如何，%=buy.amount%内容应该在已设置样式的标记内，如下所示：

<td class="table-default" style="background: blue;"><%=buy.amount%>
    ...
</td>

---

不能为元素的某个百分比着色，因此需要创建另一个元素以覆盖该元素并调整其大小

我不是CSS大师，但这可以做到

z指数：-1；将元素放置在默认元素后面 位置：绝对位置；将允许您在中定位元素 与其父容器的关系 位置：相对位置；创建子元素所需的父元素 其绝对定位的通道 我使用了一个简单的条件来决定使用哪个颜色类

第二个问题是，您必须根据显示的值计算自己。不要错过宽度结尾处的“%”：在样式中

---

只要改变你想检查我使用buy.amount>100和width%的地方的条件就可以了。

我使用的是erb，我想做的是使用CSS来表达条形图，就像在金融网站上显示的交易手册一样。谢谢，我可以给这个专栏涂上颜色，但正如我所写的，我想根据数据更改着色部分的宽度。事实上，我以前可以给专栏上色，但我不能改变彩色部分的宽度。回答更新@RyuNishida，希望对你有用。

.colorMeBlue {
    background-color: blue;
}

.colorMeGreen {
    background-color: green;
}

.parent {
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

<td class="table-default">
    <div class="parent">
        <div class="overlay <%= buy.amount > 100 ? " colorMeBlue " : "colorMeGreen " %>" style="width: <%= buy.amount%>%">&nbsp;</div>
        <%= buy.amount%>
    </div>
</td>