table columns keeps increasing width after every show column button click-CodePudding

each time I press the button, which makes certain columns appear and disappear, the table columns gradually increase in width. What could be the fix for this? I use DataTables and the button extension for the column visibility. I tried the autoWidth: true but it still does not work.

This is my JS code

var dataTableCurrent = $('#table-current').DataTable({
 autoWidth: true,
 responsive: true,
 dom: 'Bfrtip',
 columnDefs: [ {
  targets :[ 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ],
  className: 'adv_col'
  } ],
buttons: [ {
  extend: 'columnToggle',
  columns: '.adv_col',
  text: 'Show advanced columns'
} ]
});

and my CSS for the table

.table-wrapper {
    margin: 2em auto;
    width: 50%;
}
table {
    font-family: Helvetica, sans-serif;
    font-size: 0.8rem;
    border: hidden;
    border-collapse: collapse;
}
thead{background-color: green; color: white; text-align: center;}
tbody{background-color: #c2c2c2;} tbody tr:hover {background-color: #0096FF;}
td, th {
    border: 0.5px solid #ddd;
    padding: 8px;
    vertical-align: middle;
}  
tr:nth-child(even){background-color: #f2f2f2;}
#operation-buttons {text-align: center;}
.fa-user-times {color: #FF0000;} .fa-user-times:hover {color: black;}
.fa-archive {color: #2F4F4F;} .fa-archive:hover {color: orange;}
.fa-box-open {color: #2F4F4F;} .fa-box-open:hover {color: yellow;}
.archive-button, .delete-button, .unarchive-button {
    display: inline-block;
    font-size: 1.5rem;
}
#table-archived {display: none};

CodePudding user response：

Set autoWidth to false and let me know what happens. This should help but you haven't provided any link to codepen or jsfiddle to test it.

var dataTableCurrent = $('#table-current').DataTable({
 autoWidth: false,
 responsive: true,
 dom: 'Bfrtip',
 columnDefs: [ {
  targets :[ 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ],
  className: 'adv_col'
  } ],
buttons: [ {
  extend: 'columnToggle',
  columns: '.adv_col',
  text: 'Show advanced columns'
} ]
});