每次单击显示列按钮后，表格列的宽度都会增加答案

【问题标题】：table columns keeps increasing width after every show column button click每次单击显示列按钮后，表格列的宽度都会增加
【发布时间】：2023-03-29 20:35:01
【问题描述】：

每次我按下使某些列出现和消失的按钮时，表格列的宽度都会逐渐增加。有什么办法可以解决这个问题？我使用 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-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};

【问题讨论】：

标签： html jquery css datatables

【解决方案1】：

将autoWidth 设置为false 并告诉我会发生什么。这应该会有所帮助，但您没有提供任何指向 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'
} ]
});

【讨论】：