Cannot Fix More than one Column and Column Widths are not setting

So I am not able to get this to work with Bootstrap 4.

I have Multiple tables on tabs, which I would like to freeze the left two Columns. The Table also widens all of the columns out and these make the table too wide..

When I try 2 Columns, it pushes them over each other and interrupts the search function at teh bottom

  $(document).ready(function(){
                $('.stripe').DataTable({
                    pageLength: 25,
                    responsive: true,
                    fixedColumns: {
                        leftColumns:2,
                    },
                    order: [ 0, 'asc' ],
                    dom: '<"html5buttons"B>lTfgitp',
                    buttons: [
                        { extend: 'copy'},
                        { extend: 'csv'},
                        { extend: 'excel'},
                        { extend: 'pdf'},
                        {extend: 'print', orientation: 'landscape', pageSize: 'A2',
                            customize: function (win){
                                $(win.document.body).addClass('white-bg');
                                $(win.document.body).css('font-size', '10px');
                            }
                        }
                    ],
                    
                })
})

// Using a loop for a number of tables

 <?php
                    foreach($discs as $key=>$disc){
                        $ind = $key +1;
                ?>
                $('#example<?php echo $ind; ?> tfoot th').each( function () {
                        var title = $(this).text();
                        $(this).html( '<input type="text" placeholder="Search" />' );
                });
                
                var table<?php echo $ind; ?> = $('#example<?php echo $ind; ?>').DataTable(
                   
                );
                    
                table<?php echo $ind; ?>.columns().every( function () {
                    var that = this;

                        $( 'input', this.footer() ).on( 'keyup change', function () {
                            if ( that.search() !== this.value ) {
                                that
                                    .search( this.value )
                                    .draw();
                            }
                        });
                });

              

                <?php } ?>