表主体未与数据表中的表头对齐

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了，因为它是tbody ..而css仅是它的背景色等。

<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>在表标题中未对齐。 有人可以帮我弄这个吗？谢谢。