table 列在每次单击显示列按钮后宽度不断增加

Question

每次我按下按钮，这会使某些列出现和消失，table 列的宽度逐渐增加。有什么办法可以解决这个问题？我使用 DataTables 和按钮扩展来提高列的可见性。我尝试了 autoWidth: true 但它仍然不起作用。

这是我的JS代码

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'
} ]
});

和我的 CSS 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};

Answer 1

将 autoWidth 设置为 false，让我知道发生了什么。这应该有所帮助，但您没有提供任何 link 给 codepen 或 jsfiddle 来测试它。

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'
} ]
});

table 列在每次单击显示列按钮后宽度不断增加

table columns keeps increasing width after every show column button click

html

css

jquery

datatables