Question

我有一张内容很多的桌子。我想将表保持在容器宽度内。请建议我将表格包含在容器中的正确方法。我不想在一个页面中显示半桌，并提供更多选项来查看表格的整个内容。

<div class="container">
    <%= render :partial => "layouts/society_nav" %>
    <div align="center">
        <h3>Execution Petition Details</h3>
    </div>  
    <%= link_to "New Execution Petition Details",  new_admin_execution_petition_path, :class => "btn btn-primary btn-new" %>
    <div class="container">
<table border="1" class="datatable table-striped table-bordered" id="liq"> 
    <thead>
        <tr>

            <th rowspan="2">ID</th>
            <th rowspan="2"> Name & Address of Sale Officer</th>
            <th colspan="2">Opening Balance</th>
            <th colspan="2">Recovered</th>
            <th colspan="2">Disposed Off</th>
            <th colspan="2" >Balance</th>


            <th rowspan="2">Update</th>
            <th rowspan="2">Delete</th>
        </tr>
         <tr>


              <th>No of EPs</th>
              <th>Amount Involved</th>
              <th>No of EPs</th>
              <th>Amount Involved</th>
              <th>No of EPs </th>
              <th>Amount Involved</th>
              <th>No of EPs </th>
              <th>Amount Involved</th>

            </tr>
    </thead>
    <tbody>
            <% @petition.each do |f| %>
            <tr>

                <td><%= f.id %></td> 
                <td><%= f.name_of_sales_officer %><br><%=f.address_of_sales_officer%></td>
                <td><%= f.opening_balance_no_of_eps %></td>
                <td><%= f.opening_balance_amount_involved %></td>
                <td><%= f.recovered_no_of_eps %></td> 
                <td><%= f.recovered_amount_involved %></td>
                <td><%= f.disposed_off_no_of_eps %></td>
                <td><%= f.disposed_off_amount_involved %></td>
                <td><%= f.balance_no_of_eps%></td>

                <td><%= f.balance_amount_involved %></td>


                <td>
                    <%= link_to "<span class='glyphicon glyphicon-edit'></span>".html_safe,   edit_admin_execution_petition_path(f) %>
                </td>
                <td>
                    <%= link_to "<span class='glyphicon glyphicon-trash'></span>".html_safe, admin_execution_petition_path(f), :method => :delete, :title => "Delete Execution Petition ", "data-confirm" => "Do you really want to delete?" %>
                </td>
            </tr>
            <% end %>
        </tbody>

</table>
</div>

Answer 1

将你的表放在bootstrap的列div中。

示例：

<div class="container">
  <div class="row clearfix">
   <div class="col-md-12 column">
       ....put your table here....and bootstrap will manage it...with responsiveness
    </div>
  </div>
</div>

表超过bootstrap容器宽度

1 个答案: