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

Posted 2023-05-09

【中文标题】每次单击显示列按钮后，表格列的宽度都会增加

【英文标题】：table columns keeps increasing width after every show column button click

【发布时间】：2021-12-27 11:33:19

【问题描述】：

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

theadbackground-color: green; color: white; text-align: center;
tbodybackground-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;

【参考方案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'
 ]
);