如何在不考虑屏幕分辨率的情况下将JQuery数据表适合整个屏幕宽度

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

用container-fluidclass将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>

Answer 2

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

进一步解释：width: 100vw;是相对于veiwport宽度设置的。(这覆盖了视口的100%(其中width: 100%是相对于父div设置的(这覆盖了父div宽度的100%。

width: 100vw;

Answer 3

Rahul的回答和Meet Dave的回答相结合，再加上我尝试过的一次更改，效果很好。如果我删除了这3个更改中的任何一个，那么它就不起作用了(好吧，3个修复中的每一个都会增加宽度，但仍然不会完全填满屏幕宽度(。

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

1. 满足Dave的答案-将100%更改为100vw
2. Rahul的回答-删除table-responsive
3. 我尝试过的东西-删除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&戴夫！！