Тело таблицы не соответствует заголовку таблицы в таблицах данных

Question

Я исследовал и попробовал все возможные решения для этого, но ни одно из них не работает для меня.

Это сценарий для моей базы данных.

$(document).ready(function () {
    var Table = $('#dtBasicExample').DataTable({
    "scrollY": 500px,
    "scrollX": true,
    "autoWidth": true,
    "scrollCollapse": true,
    "responsive": true,
    "ordering": false,
    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
    });

    $('.dataTables_length').addClass('bs-select');
});

Это мой html ... Я использовал php для его тела ... и это css только для его фона и т. Д. c ..

<div class="card" style="border-top:3px solid #ffcc00;">    
              <div class="card-body">
                <div id="table" class="table-editable"> 
                     <div class="table-wrapper-scroll-Y" style="overflow:auto;">

                            <table id="dtBasicExample" class="shube table table-bordered table-striped  table-hover table-dark table-condensed" width="100%" >
                            <thead>
                                <tr>            
                                    <th colspan="7" style="vertical-align:middle">sample</th>       
                                    <th colspan="3" style="vertical-align:middle" class="">sample</th>
                                    <th colspan="3" style="vertical-align:middle" class="">sample</th>
                                    <th colspan="3" style="vertical-align:middle" class="">sample</th>
                                    <th colspan="3" style="vertical-align:middle" class="">sample</th>
                                </tr>

                                <tr>
                                    <th style="vertical-align:middle">No.</th>          
                                    <th  style="vertical-align:middle">sample<br>sample</th>
                                    <th  style="vertical-align:middle">sample<br>sample</th>

                                    <th  style="vertical-align:middle">sample</th>
                                    <th style="vertical-align:middle">sample<br>sample</th>
                                    <th style="vertical-align:middle">sample</th>
                                    <th  style="vertical-align:middle">sample<br>sample</th>

                                    <th  style="vertical-align:middle;" class="">sample</th>
                                    <th  style="vertical-align:middle;" class=""> sample</th>
                                    <th  style="vertical-align:middle;" class=""> sample</th>

                                    <th  style="vertical-align:middle;" class="">sample</th>
                                    <th  style="vertical-align:middle;" class="">sample</th>
                                    <th  style="vertical-align:middle;" class="">sample</th>

                                    <th  style="vertical-align:middle;" class="">sample</th>
                                    <th  style="vertical-align:middle;" class=""> sample</th>
                                    <th  style="vertical-align:middle;" class=""> sample</th>

                                    <th  style="vertical-align:middle;" class="">sample</th>
                                    <th  style="vertical-align:middle;" class="">sample</th>
                                    <th  style="vertical-align:middle;" class="">sample</th>

                                </tr>
                            </thead>
                            <tbody  style="vertical-align:middle;text-align : center;font-family:arial;">
                                        <?php echo $tbody;?>
                            </tbody>
                        </table>
                     </div>
                </div>
            </div>
</div>

И это вывод. .

Как видите, <tbody> не выровнен в заголовке таблицы. Может кто-то помочь мне с этим? Спасибо.