after row.add in DataTable not showing responsive

Question

I have the table .

var mytable=$('#my-table').DataTable({options});

when generated tag table is ...

<table class="table table-hover table-striped table-responsive dataTable no-footer" id="my-table" role="grid" aria-describedby="my-table_info">

I add row with mytable.row.add({columns}); when I added new row ,table not showing responsive in Firefox browser(in chrome is showed responsive when remove class 'datatable' from tag table).

If that is empty is displayed correctly.

why show the table responsive?

best regard.

Answer 1

Add <div class="table-responsive"> div before your table. And remove, if there are any width="100%" style applied to your table.

<div class="table-responsive">
  <table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0">
  <thead>
      <tr>
        <th>Name</th>
        <th>Surname</th>
      </tr>
  </thead>
  </table>
</div>

Answer 2

solved .

I add

$('#example').dataTable( {
  "autoWidth": false
} ); 

worked in chrome.

and set width for column by CSS .that's worked in firefox.

That reason is column auto width giving value.

Answer 3

dataTable.columns.adjust().draw()

为我工作。