Есть ли способ выровнять кнопки и поисковый фильтр из Datatables?

Question

В настоящее время разрабатывается небольшой сайт для друга.Я использую Bootstrap 4 и плагин DataTable.

Первая проблема: Datatables поначалу отзывчивы, но каждый размер окна не корректирует его (он помещает горизонтальную полосу прокрутки), но обновляет размерЭто нормально для нового экрана.

Вторая проблема: я использую Datatables в основном для функции фильтра и функции сортировки.Но кнопки, которые идут с ним, находятся в углах элемента, содержащего таблицу, а не саму таблицу.Таблица иногда меньше, чем div, поэтому кнопки расположены слишком далеко от таблицы.

Пример: https://ibb.co/6HzjMGh (обратите внимание на кнопки справа)

НастройкаТаблица с максимальной шириной работает, но ужасна.

Плюс, с максимальной шириной (по умолчанию) здесь перед изменением размера: https://ibb.co/1vf541H

После: https://ibb.co/fCh0HFs (Обратите внимание, что полоса прокрутки и ширина столбца не меняются)

При обновлении: https://ibb.co/1TNwGD1

То же самое происходит с w-auto.

Что я пробовал:

Я попытался обернуть в div и установить ширину по умолчанию для Datatables, но это не выглядит хорошо.Я искал в Интернете, не нашел ничего полезного.

HTML-код:

<div class="container-fluid">
                <h1 class="mt-4">Liste des contracteurs</h1>
                <div class="table-responsive">  
                    <table id="contracteur_data" class="table table-striped table-bordered"> 
                        <thead>  
                            <tr>  
                                <td># Contracteur</td>  
                                <td>Description</td>
                                <td>Options</td>    
                            </tr>  
                        </thead>  
                        <?php  
                        while($row = $SelectContracteurs_Query->fetch()) {  
                            echo '  
                            <tr>  
                                <td>'.$row["idContracteur"].'</td>  
                                <td>'.$row["Description"].'</td>
                                <td><a href="ContracteurEdit.php?id=' .$row["idContracteur"]. '"><button type="button" class="btn btn-primary">Modifier</button></a></td>
                            </tr>  
                            ';  
                        }  
                        ?>  
                    </table>  
                </div>
            </div>

Ожидается:

Я хочу, чтобы таблица была отзывчивой, а кнопки были выровнены с ней независимо от того,ширина стола.

Любая помощь будет принята с благодарностью.Спасибо.

РЕДАКТИРОВАТЬ:

Я использовал неправильный исходный файл (JS, CSS) данных.Я использовал v3 вместо v4, поэтому Bootstrap испортился.