隐藏/显示列后边距数据表自行增加

Question

隐藏/显示列后，边距表数据自行增加。

此结果在显示/隐藏列之前。

之后，我显示/隐藏 10++ 次

数据表 CSS 设置默认值

table.dataTable {

    width: 100%;

    margin: 0 auto;

}

它从 5 开始，每次显示或隐藏时加 1。我多次点击后终于没有人阻止它

我的剧本

var table = $('#table-result').DataTable({

        responsive: true,

        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],

        dom: 'Blfrtip',

        buttons: [          

          {

            extend: 'collection',

            text: 'Export',

            buttons: [

                'copy',

                {

                  extend: 'excel',

                  title: titleExport

                },

                {

                  extend: 'csv',

                  title: titleExport

                },

                {

                  extend: 'pdf',

                  title: titleExport

                }

            ]

          }

        ],

        rowReorder: true,

        columnDefs: [

            { orderable: true, className: 'reorder data-table-custom-font', targets: 0 },

            { orderable: true, className: 'reorder data-table-custom-font', targets: 1 },

            { orderable: false, className: 'data-table-custom-font', targets: '_all' }

        ]

      });

这个脚本显示/隐藏列

  $('button.toggle-vis').on( 'click', function (e) {

            e.preventDefault();           

            // Get the column API object

            let column = table.column( $(this).attr('data-column') );

            console.log($(this).attr('data-column'))  

            // Toggle the visibility

            column.visible( ! column.visible() );

              

          } );

谢谢。如果您还想要更多东西，请告诉我。

Answer 1

我的答案设置样式宽度：100%<table&nbsp;class="table&nbsp;table-bordered&nbsp;table-striped&nbsp;hover"&nbsp;id="table-result"&nbsp;style="width:100%">