html - 无论屏幕分辨率如何，如何使 JQuery 数据表适合整个屏幕宽度？

Question

我在我的 Rails 应用程序中使用 JQuery 数据表，如下所示:

<%= content_tag :table, 
                role: :my_datatable, 
                id: 'my_datatable', 
                style: 'height:500px; overflow-y: auto;',
                class: 'table table-responsive reconciletable  table-striped table-bordered table-hover', 
                data: { url: my_datatable_path(format: :json)} do %>
  <thead>
    <tr>
      <th>Account Number</th>
      <th>Account Name</th>
      <th>col3</th>
      <th>col4</th>
      <th></th>      
    </tr>
  </thead>

  <tbody>
  </tbody>

<% end %>

当屏幕分辨率较高时，数据表只占屏幕宽度的一半，无法覆盖整个宽度。

请问如何使它适合整个宽度？

我尝试了这两种方法，但都没有用(都涉及添加 width: 100%):

方法一:

<%= content_tag :table, 
                role: :my_datatable, 
                id: 'my_datatable', 
                style: 'height:500px; overflow-y: auto;',
                width: '100%',
                class: 'table table-responsive reconciletable  table-striped table-bordered table-hover', 
                data: { url: my_datatable_path(format: :json)} do %>

方法 2:

<%= content_tag :table, 
                role: :my_datatable, 
                id: 'my_datatable', 
                style: 'height:500px; width: 100%; overflow-y: auto;',
                class: 'table table-responsive reconciletable  table-striped table-bordered table-hover', 
                data: { url: my_datatable_path(format: :json)} do %>

请帮忙!

Answer 1

使用 container-fluid class 将您的 content_tag 包裹在 div 中，如下所示:

<div class="container-fluid">
  <%= content_tag :table,  role: :my_datatable,  id: 'my_datatable',  style: 
    'height:500px; overflow-y: auto;', width: '100%', class: 'table table-responsive 
    reconciletable  table-striped table-bordered table-hover',  data: { url: 
    my_datatable_path(format: :json)} do %>
</div>