Question

我想设置像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

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

我不是CSS大师，但这样做会。

z-index: -1;会将元素置于默认元素
position: absolute;将允许您定位元素与其父（容器）的关系
position: relative;创建孩子需要的父元素获取其绝对定位

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

第二个你需要根据你显示的任何值来计算自己。（不要错过%中width:末尾的“style”。

.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%>%"作为示例的位置的条件。

Answer 2

不确定您确实想做什么以及您使用HTML语言。无论如何，％= buy.amount％内容应该在样式标记内，如下所示：

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

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

2 个答案: