Datatables не сворачивает первый столбец в правильной точке

Question

первый столбец в моем столбце не падает в нужной точке.На следующих изображениях я показываю проблему:

1.Изображение

2.Изображение

3.Изображение

4.

Моя таблица выглядит так:

<div id="TestTable">
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
</div>

Моя функция JS выглядит так:

 $(document).ready(function () {
        $('#example').DataTable({
            serverSide: true,
            ajax: '../api/data/test',
            stateSave: false,
            responsive: true,
            "deferRender": true
        });
    });

Кто-нибудь знает, как ее исправить?

PS Вот источники, которые я беру для страницы:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="~/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/js/dataTables.responsive.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="~/css/navbar.css" />
<link rel="stylesheet" href="~/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="~/css/responsive.dataTables.min.css" />