Question

我的视图显示了搜索中返回的产品表格，以及各自的详细信息，销售这些产品的供应商及其相关价格。我想要做的是将供应商和价格放在下拉列表中，而不是让两个数据单元有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>

提前致谢！

Answer 1

我认为标记中存在一些值得提及的错误：

您的css类“search-table”可能不会被假定应用于表的行： <tr class="search-table">
标题行在语义上更好地将“thead”标记和行标记中的列包装为“th”标记：<thead> <tr class="search-table"> <th>Product</th> <th>Details</th> <th>Brand</th> <th>ID</th> <th>Vendors</th> </tr><thead>
就问题而言，我认为使用Bootstrap框架和下拉列表是不方便的。恕我直言可折叠元素将显示一些额外信息的技巧。只需将可绑定的div包装到表格的单元格中，它看起来就像这样： http://jsfiddle.net/aizekAzimov/9LHw2/

希望它能帮助

表数据单元格中的Twitter Bootstrap下拉列表

1 个答案: