如何设置table列的样式，比如给列着色，指定列的宽度？

Question

我想为 table 设置样式，如 this，我的意思是我想为列设置样式，根据数据指定宽度，也根据数据指定颜色。

<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>

<div style="background: blue;"></div> 我尝试了下面的代码，但没有用。

Answer 1

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

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

Answer 2

您无法为元素的百分比着色，因此您需要创建另一个元素来覆盖该元素并调整该元素的大小。

我不是 CSS 大师，但这样做就可以了。

z-index: -1; 会将元素放在默认元素后面
position: absolute; 将允许您将元素定位在与其父级（容器）的关系
position: relative; 创建子元素需要的父元素访问其绝对定位

我使用一个简单的条件来决定使用哪种颜色 class。

第二个你必须根据你显示的任何值来计算你自己。（不要错过 style 中 width: 末尾的 '%'...）

.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>

只要改变你想检查的条件，我用 buy.amount > 100 和 "width: <%= buy.amount%>%" 作为例子。

如何设置table列的样式，比如给列着色，指定列的宽度？

How can I style a column of a table, such as coloring a column, specifying the width of the column?

html

css

erb