I am trying to set the maximum width for a datatable with a fixed header using JavaScript.
Below is the JavaScript code snippet I am using:
var oTable = $('#example').DataTable(
{
"sScrollY": 200,
// "bScrollCollapse": true,
// "bAutoWidth": true,
// "sScrollX": "100%",
// "sScrollXInner": "100%"
});
However, when I apply the "sScrollY" property, the column widths are not adjusting properly. To fix this issue, I want to reset the column width for each <th> and <tr>.
I have attempted various approaches to solve this problem without success.
Here is the HTML Code:-
<section class="panel">
<header class="panel-heading">
Scheduled Outages
</header>
<div class="panel-body">
<div class="adv-table">
<table class="display table table-bordered table-striped" id="example1">
<thead>
<tr>
<th>Id</th>
<th>Planned Start Date</th>
<th>Planned End Date</th>
<th>D...</th>
<th class="hidden-phone">Ho...</th>
<th class="hidden-phone">Syst...</th>
<th class="hidden-phone">Area</th>
<th class="hidden-phone">Loc Name</th>
<th class="hidden-phone">Loc Unit</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>65</td>
<td>01/17/2018 00:00:00</td>
<td>01/22/2018 00:00:00</td>
<td class="center hidden-phone">5</td>
<td class="center hidden-phone">0</td>
<td class="center hidden-phone">Mainline</td>
<td class="center hidden-phone">Kennedy Ave(WO01)</td>
<td class="center hidden-phone">Kennedy Ave</td>
<td class="center hidden-phone">Meter Loopline</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Planned Start Date</th>
<th>Planned End Date</th>
<th>D...</th>
<th class="hidden-phone">Ho...</th>
<th class="hidden-phone">Syst...</th>
<th class="hidden-phone">Area</th>
<th class="hidden-phone">Loc Name</th>
<th class="hidden-phone">Loc Unit</th>
</tr>
</tfoot>
</table>
</div>
</div>
</section>
Image Link :-