How to remove inline-style width from th in dataTable?

  • 0
    Hello! I can not remove the width th, which the dataTable sets automatically. Somewhere too small, but somewhere it is for some reason large. Please tell me how to fix this?
    This is how it looks now:


    And this is how it should look:


    <table id="example-autoInv" class="display" style="width:100%; font-size:12px">
                   <thead>
                   <tr class="text--uppercase">
                       <th class="ng-binding">Portfolio Name</th>
                       <th class="hlp--ac ng-binding">Status</th>
                       <th class="hlp--ac ng-binding">Interest rate</th>
                       <th class="hlp--ac ng-binding">Maximum investment in one loan</th>
                       <th class="hlp--ac ng-binding">Number of Investments</th>
                       <th class="hlp--ac ng-binding">Portfolio Size</th>
                       <th></th>
                       <th></th>
                       <th></th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr>
                       <td>Demo Strategy 2</td>
                       <td>Active</td>
                       <td>8% - 10%</td>
                       <td>€10'000.00</td>
                       <td>0</td>
                       <td class="hlp--ac ng-binding"><span class="text--secondary ng-binding">€0.00 /</span> €10'000.00</td>
                       <td class="hlp--ac"><a href="" class="btn btn--sm btn--primary ng-binding">Edit</a></td>
                       <td class="hlp--ac">
                           <a href="" class="btn btn--sm btn--secondary ng-binding ng-hide">Activate</a>
                       </td>
                       <td class="hlp--ac">
                           <a href="" class="btn btn--sm btn--text">Delete</a>
                       </td>
                   </tr>
                   <tr>
                       <td>Demo Strategy 2</td>
                       <td>Active</td>
                       <td>8% - 10%</td>
                       <td>€10'000.00</td>
                       <td>0</td>
                       <td class="hlp--ac ng-binding"><span class="text--secondary ng-binding">€0.00 /</span> €10'000.00</td>
                       <td class="hlp--ac"><a href="" class="btn btn--sm btn--primary ng-binding">Edit</a></td>
                       <td class="hlp--ac">
                           <a href="" class="btn btn--sm btn--secondary ng-binding ng-hide">Activate</a>
                       </td>
                       <td class="hlp--ac">
                           <a href="" class="btn btn--sm btn--text">Delete</a>
                       </td>
                   </tr>
    
                   </tbody>
                   <tfoot>
                   <tr>
                       <th>Name</th>
                       <th>Position</th>
                       <th>Office</th>
                       <th>Age</th>
                       <th>Start date</th>
                       <th>Salary</th>
                   </tr>
                   </tfoot>
               </table>

    <script>
    
        $(document).ready(function() {
            $('#example-autoInv').DataTable({
                "autoWidth":true,
            });
        } );
    </script>

    Library link: https://datatables.net/examples/basic_init/
    JavaScript Brielle Abbott, Feb 19, 2020

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!