1

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

我的表格

我的代码看起来像这样

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

任何帮助表示赞赏

4

2 回答 2

2

您的表格正在正确呈现，它们之间唯一不同的是您的 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 或更少）

于 2013-05-22T11:36:07.997 回答
0

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

table-layout: fixed;

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

于 2013-05-22T11:41:14.040 回答