如何解决数据表中的设计问题

问：

我有带有列搜索的 JQuery 数据表。当我按 Tab 键时，我的表头在移动，但表体没有移动。 下面是我的代码。

 
        
var table=$('#example').DataTable({
         // stateSave: true
          "ordering": false,
          "retrieve": true,
          "fixedHeader": true,
           "scrollX": true,
            // "fixedColumns": {
            //    left: 1
            //  },  

        
              scrollY: '600px',
            dom: 'lBfrtip',
            buttons: [
            {
                extend: 'excel',
                text: 'Export',
                title:'Aluminum Coil Production Tracking Entries',
                className: 'btn btn-primary',
                header: true,
                exportOptions: {
                    //columns: ':visible:not(.notexport)'
                    //columns: [':visible', 16,18,19 ]
                     columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
                }
            }],
           
           
         });
        
         // Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.header() ).on( 'keyup change', function () {
            
            if ( that.search() !== this.value ) {
                that.search( this.value )
                    .draw();
            }
        } );
    } );

我遇到了像屏幕截图一样的设计问题

htmlcode