显示表格和 .each 块的问题答案

【问题标题】：Display issues with tables and .each block显示表格和 .each 块的问题
【发布时间】：2013-05-22 11:23:23
【问题描述】：

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

我的代码是这样的

<%= 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 提供，并设置为其默认值。也许我设置表格的方式有问题？

任何帮助表示赞赏

【问题讨论】：

标签： html css ruby-on-rails ruby-on-rails-3 datatables

【解决方案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 或更少）

【讨论】：

【解决方案2】：

您可以通过以下方式更好地控制表格和单元格的宽度：

table-layout: fixed;

如果没有工作示例，很难给出更详细的答案。您没有发布任何 CSS，最好发布发送到浏览器的 HTML。

【讨论】：