0

我的视图显示了在搜索中返回的产品表，以及它们各自的详细信息、销售这些产品的供应商及其相关价格。我想要做的是将供应商和价格放在下拉列表中，而不是让两个数据单元格有 5 个以上的供应商和价格扭曲表格行高。这可能吗？最好的方法是什么？我看过使用列表，但不确定如何以这种方式将价格和供应商放在下拉列表中。我目前正在使用表格中的表格（表格开始），但如果您认为有更好的方法，请告诉我。这是我目前的看法：

<table>  
<tr class="search-table">  
  <td>Product</td>
  <td>Details</td>
  <td>Brand</td>
  <td>ID</td>
  <td>Vendors</td>
</tr>

<% @search_res.each do |item| %>

 <tr class="search-table"> 
  <td><%= item.product %></td>
   <td><%= item.details %></td>
   <td><%= item.brand %></td>
   <td><%= item.id %></td>
    <td>
     <table>

      <tr>
        <% item.vendors.each do |vendor| %>
        <td><%= vendor.name %></td>
        <% end %>
      </tr>

      <tr>
        <% item.inventory_items.each do |product| %>
        <td><%= product.price %></td>
        <% end %>
      </tr>

      </table>
    </td>
 </tr>
<% end %>
</table>

提前致谢！

4

1 回答 1

0

我认为标记中有一些错误值得一提：

  1. 您的 css 类“search-table”可能不假定应用于表的行： <tr class="search-table">

  2. 标题行在语义上更好地包装在“thead”标签中，行标记中的列作为“th”标签：<thead> <tr class="search-table"> <th>Product</th> <th>Details</th> <th>Brand</th> <th>ID</th> <th>Vendors</th> </tr><thead>

  3. 关于问题，我认为使用 Bootstrap 框架和下拉菜单并不方便。恕我直言，可折叠元素会显示一些额外信息。只需将可折叠的 div 包装到表格的单元格中，它就会看起来像这样：http: //jsfiddle.net/aizekAzimov/9LHw2/

希望它会有所帮助

于 2013-08-08T06:33:53.020 回答