Question

我正在Rails应用程序中使用JQuery Datatable，如下所示：

<%= 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%）：

方法1：

<%= 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

用content_tag div将container-fluid包裹在class内，像这样：

<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>

Answer 2

将宽度设置为100vw将覆盖整个屏幕宽度，而与分辨率无关。

进一步说明：field(:role, non_null(:string))是相对于veiwport宽度设置的。（这涵盖了100％的视口） width: 100vw;是相对于父级div设置的（覆盖父级宽度的100％。

width: 100%

Answer 3

将Rahul的答案和Meet Dave的答案相结合，再加上1个我尝试过的更改。如果我删除了这3个更改中的任何一个，那么它将不起作用（嗯-这3个修复程序的宽度都会增加，但仍不能完全填满屏幕宽度）。

因此，这三个步骤的结合就像一个魅力：

满足戴夫的答案-将100%更改为100vw
Rahul的答案-删除table-responsive
我尝试过的操作-删除reconciletable

因此可行（以上代码中的上述所有3种都实现了）

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

注意：<div class="container-fluid">对此并没有真正帮助。

非常感谢Rahul＆Dave！

不管屏幕分辨率如何，如何使JQuery数据表适合整个屏幕宽度？

3 个答案: