属性一行，嵌套在下面（如何在表中显示正确的关系？）

Question

这是我在过去几个月开始我的 Ruby on Rails 之旅时遇到的最困难的问题。

似乎很多人都会面对它，但我在网上找不到任何可以解决这个问题的东西，这意味着我的问题要么非常简单，要么我想得太难了，要么我问错了问题。请帮助我找到正确的答案和/或正确的问题！

当用户提交表单时，它包括属性（量化）和嵌套属性（结果）。当用户单击索引时，我希望他看到量化在标题行中创建了一个新列（对于每个新的量化实例，它水平地穿过页面）。然后，对于他提交或稍后添加的每个结果，我希望他看到结果在该列中创建一个新行（垂直向下移动页面）。

我希望我解释得很好，并没有让它听起来比实际更令人困惑。

这是我可以使用 html 标签使表格看起来像的一种变体：

这是另一个变体：

但无论出于何种原因，我都无法得到这个，这就是我想要的：

此时我真的不知道，因为我已经尝试了所有方法，你需要什么代码来帮助我，所以我不会在这里全部倾销，而是通过 github 在这里给你：https://github.com/RallyWithGalli/ruletoday

更新

使用下面帕特里克的回答，我可以让表格看起来像这样：

但它的问题是，如果用户添加了另一个量化参数，例如冥想 (min)，并且包含的​​结果行比它前面的行多，那么结果将向左移动，直到它碰到具有那么多行或更多行的另一列。在上面的例子中，“2.1”应该在冥想列，但它却落入了重量列。

更新 2.0

下面是 Patrick 的更新：

再次感谢您尝试 Patrick。是你让我坚持到这一步。你提到了引导程序。我再看一遍。

提前感谢您的帮助！我将永远欠你的债。

Answer 1

这很棘手，因为数据是按列排列的，但我们需要按行排列。我不是 100% 确定我了解量化数据的布局方式，但解决方案的要点是，您需要两个单独的循环，因为标题 <thead> 和数据 <tbody> 位于 <table> 的不同部分中。让我们重新计算平均值：

<h2>AVERAGE</h2>
<%
  averaged_data_rows = {} 
%>
<%# averaged_data_rows should end up as:
  {
    0 => [result, result, result],
    1 => [result, result, result],
    etc.
  }
%>
<table>
  <thead>
    <tr>
      <% @averaged_quantifieds.each do |averaged| %>
        <% if averaged.user == current_user %>     
          <th><%= averaged.name %> (<%= averaged.metric %>)</th>
          <% 
            averaged.results.each_index do |idx|
              averaged_data_rows[idx] ||= []
              averaged_data_rows[idx] << averaged.results.to_a[idx]
            end
          %>
        <% end %>
      <% end %>
    </tr>
  </thead>
  <tbody>
    <% averaged_data_rows.values.each do |row| %>
      <tr>
        <% row.each do |result| %>
          <td>
            <%= result.date_value.strftime("%m-%Y") %>
            &nbsp;
            <%= result.result_value %>
          </td>
        <% end %>
      </tr>
    <% end %>
  </tbody>
</table>

更新

我害怕那个。另一种可能性是按列保留数据并执行浮动无序列表。使用像Bootstrap 这样的网格框架会很有帮助。但这是一个快速且非常肮脏的想法，可以工作（假设您不在乎重量（磅）列没有 02-2015 值，因此它的 03-2015 值与另一个 02-2015 值相邻值）：

<h2>AVERAGE</h2>
<div>
  <% @averaged_quantifieds.each do |averaged| %>
    <% if averaged.user == current_user %>
      <%# 
        Inline CSS like this is generally frowned upon. I am using it
        here for demonstration purposes only. The best solution would
        be to use Bootstrap or something like it to get the side-by-side
        view on wide screens and top-to-bottom view on smaller screens.
        But I think that is outside the context of this particular question.
      %>
      <div style="float:left; width:200px;">
        <h4><%= averaged.name %> (<%= averaged.metric %>)</h4>
        <ul>
          <% averaged.results.each do |result| %>
            <li>
              <%= result.date_value.strftime("%m-%Y") %>
              &nbsp;
              <%= result.result_value %>
            </li>
          <% end %>
        </ul>
      </div>
    <% end %>
  <% end %>