jquery - Table columns have incorrect sizes in a popup -

my aim implement fixed header on table thead , tbody scrollable.

my html code:

<div class="scroll1" id="style-3">         <div id="empmasterformmappingdetails">             <div class="col-lg-12 wmpfrmacc">                      <table id="abc" border="1" style="width:100%;" >                         <thead>                             <tr>                                 <th>a</th>                                 <th>b</th>                                 <th>c</th>                                 <th>can view can view can view</th>                                 <th>can insert</th>                                 <th>can delete</th>                                </tr>                         </thead>                         <tbody id="tbodymasterformmapping"></tbody>                     </table>               </div>         </div>         </div> 

script:

<script>     $(document).ready(function () {             $('#abc').datatable({                 "scrolly": "250",                 "scrollx": true,                 "paging": false,                 "ordering": false,                 "info": false,                 "bfilter": false,                 "autowidth": true             });         }); </script> 

in above code thead , tbody coming dynamically other js. note : no inline styling done thead , tbody or th or tr or td.

and scrolling possible on pop when thead appears @ first time width of thead doesn't come according t body when resize window using mouse works fine. why?

what have done have given fixed width thead doesn't apply. have used !important none works.

solution

you need use columns.adjust() api method once table becomes visible recalculate column widths.

$('#abc').datatable().columns.adjust(); 

from manual:

this method provided have datatables recalculate columns sizes, based on data in table , size applied columns (in dom, css or through columns.width parameter). call when table becomes visible if hidden when initialised (for example in tab) or when data changes significantly.

datatables automatically call method on window resize event keep columns in sync re-flowed layout.