每次按下按鈕，使某些列出現和消失，表格列的寬度逐漸增加。有什么辦法可以解決這個問題？我使用 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};
uj5u.com熱心網友回復：
設定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'
} ]
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/358730.html
上一篇：如何在SwiperJS中使用activeIndex，如何激活第二個滑塊，而不是第一個
下一篇：如何洗掉空的div