In my Rails application, I am using JQuery Datatable with the following code:
<%= 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 %>
However, I encountered an issue where the datatable only covers half of the screen width on a high-resolution screen.
I attempted two solutions by adding width: 100%, but neither worked. Here are the approaches I tried:
Approach 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 %>
Approach 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 %>
If anyone has a solution to make the datatable fit the entire width, please help!