https://i.sstatic.net/aZirB.png https://i.sstatic.net/ZC3IP.png every time I click on the button to show or hide certain columns in the table, the width of the columns keeps increasing gradually. Is there a solution for this issue? I am using DataTables with the column visibility button extension. I have already tried setting autoWidth: true but it didn't solve the problem.
Here is my JavaScript code snippet:
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 this is the CSS styling 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};