显示表和.each块的问题

Question

我正在尝试在我的页面上动态加载一个fixture列表，所以我认为最好的办法是在这种情况下使用表而不是列表。我的问题是每个表的呈现略有不同，它们都需要镜像屏幕截图中的第一个表

我的代码看起来像是

<%= form_tag controller: 'predictions', action: 'create', method: 'post' do %>
 <% @fixture_date.sort.each do |date, fixture| %>
  <table>
   <h5><%= date_format(date) %></h5>
    <tbody>
     <% fixture.each do |fixture|%>
      <tr>
       <td><%= fixture.home_team %></td>
       <td><%= text_field_tag "predictions[][home_score]" %></td>
       <td><%= text_field_tag "predictions[][away_score]" %></td>
       <td><%= fixture.away_team %></td>
       <%= hidden_field_tag "predictions[][home_team]", fixture.home_team %>
       <%= hidden_field_tag "predictions[][away_team]", fixture.away_team %>
       <%= hidden_field_tag "predictions[][fixture_date]", fixture.fixture_date %>
       <%= hidden_field_tag "predictions[][fixture_id]", fixture.id %>
      </tr>  
     <% end %><!-- fixture -->
    <% end %><!-- date-->
   </tbody>
  </table>
 <% end %><!--Form Tag--> 

任何人都可以看到任何明显错过的东西。 CSS由Twitter Bootstrap提供，并设置为默认值。也许我设置表格的方式有问题？

任何帮助表示赞赏

Answer 1

你的桌子正确渲染，它们之间唯一不同的是你的tds的宽度。只需在css中设置每个td的宽度即可。例如，您可以以％为单位设置宽度，并执行以下操作：

table.fixtures {
    td {
        width: 40%;
        &:nth-child(2), :nth-child(3) {
            width: 10%;
        }
    }
}

这个css期待你的桌子有4个tds，并且将第2和第3的宽度设置为10％，其余的设置为40％。 （我也使用sass，但你也可以使用普通的css或更少）

Answer 2

使用此功能可以更好地控制表格和单元格的宽度：

table-layout: fixed;

如果没有一个有效的例子，很难给出更详细的答案。你没有发布任何CSS，最好发布发送到浏览器的HTML。