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

Question

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

似乎很多人都会面对它，但我无法在网上找到解决这个问题的任何内容，这意味着我的问题要么是过于简单，要么是我在想太难，要么是我在问错了问题。请帮我找到正确的答案和/或正确的问题！

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

我希望我解释得那么好，并没有让它听起来更加混乱。

这是我可以使用html标签看到的表格的一个变体：

这是另一个变体：

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

我现在真的不知道，因为我已经尝试了所有的东西，你需要什么代码来帮助我，而不是把它全部丢弃在这里我会通过github给你这里：https://github.com/RallyWithGalli/ruletoday

的更新

使用Patrick的答案，我能够让表格看起来像这样：

它的问题在于，如果用户添加另一个量化的数据，例如meditate（min）并包含更多结果行，那么在它之前的行然后结果将向左移动，直到它到达具有那么多行或更多行的另一列。在上面的例子中＆＃34; 2.1＆＃34;应该在冥想专栏中，而是落入重量栏。

更新2.0

在下面的Patrick更新中，这就是现在的样子：

再次感谢帕特里克。到目前为止，你是那个坚持我的男人。你提到了bootstrap。我再说一遍了。

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

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