Заголовок таблиц не центрируется в таблицах данных

Question

Я работаю с фреймворком datatables . И у меня есть некоторые проблемы с заголовком, мои вопросы, почему, если я объявляю scrollX:true, заголовок маленьких таблиц выглядит следующим образом?

Если я объявляю scrollX:false, он позиционируется правильно, но проблема начинается, когда мои таблицы больше экрана и переполняются в позиции X. По этой причине решение - scrollX:true, но затем я начинаю с oop того, что я должен сделать ...

HTML

<table id="myTable" class="display cell-border">
    <thead>
        <tr>
            <th>Id</th>
            <th>Nombre</th>
            <th>Descripción</th>
        </tr>
        </thead>
        <tbody>
            {% for fl in FleetsList %}
                <tr>
                    <td>{{fl.fleet_id}}</td>
                    <td>{{fl.fleet_name}}</td>
                    <td>{{fl.description}}</td>
                </tr>
            {% endfor%}
        </tbody>
    </table>

Javascript (jquery)

$(document).ready(function() {
    $('#myTable').DataTable( {
        scrollY: '50vh',         
        scrollX:false,   
        scrollCollapse: true,
    } ); } );

Кто-нибудь может мне помочь? Большое спасибо!