html - 表超出 Bootstrap 容器宽度

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>