HTML表格标题不会出现在最大宽度上

Question

我有一个使用jquery datatable插件的表，由于某种原因，标题看起来像这样，如果我单击sort或其他操作，标题将自动调整为最大宽度。

这是代码

<div class="card-body">
    <div class="container-fluid">

        <div id="content" class="d-none">
            <div class="table-responsive">
                <table id="tblParametros" class="table custom-table text-center">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Referência</th>
                            <th>UAP</th>
                            <th>Nº de Dias</th>
                            <th>Nº de Turnos</th>
                            <th>Nº de PAB(s)</th>
                            <th>Alcance de Abastecimento</th>
                            <th>Quantidade Mínima</th>
                            <th>Quantidade Máxima</th>
                            <th></th>
                        </tr>
                    </thead>
                </table>

            </div>

            <!-- Modal structure -->
            <div id="modal" class="iziModal custom-modal" data-iziModal-fullscreen="true" data-iziModal-title="Parâmetro" data-iziModal-subtitle="Edição de parâmetros" data-iziModal-icon="fas fa-edit">
                <section>
                    <!-- Modal content from partial view -->
                    <div class="container-fluid p-5 iziModal-content">
                        <partial name="_EditPartial" for="Parametro" />
                    </div>
                </section>
            </div>
        </div>
        <div id="loading" class="text-center">
            <img src="~/images/ajax/loader-ellipsis.svg" />
        </div>
    </div>
</div>

js

     $(document).ajaxStart(function () {
        $("#loading").show();
        $("#content").addClass('d-none');
    }).ajaxStop(function () {
        $("#loading").hide();
        $("#content").removeClass('d-none');
    });

 $(function () {
           var table = $('#tblParametros').DataTable({
                scrollY: "60vh",
                ajax: {
                    url: '@Url.Action("List","Parametros")',
                    dataSrc: ""
                },
                columns: [
                    { data: "id" },
                    { data: "referencia" },
                    { data: "uap" },
                    { data: "numDias" },
                    { data: "numTurnos" },
                    { data: "numPAB" },
                    { data: "alcanceAbastecimento" },
                    { data: "qtdMin" },
                    { data: "qtdMax" },
                    {
                        data: "id",
                        render: function (data, type, row) {

                            return '<button class="btn" onclick="EditParametro('+data+')" data-izimodal-open="#modal" data-izimodal-transitionin="fadeInDown">' +
                                '<i class="fas fa-edit"></i>' +
                                '</button>';
                        }
                    }
                ]
            });
        });

以及我应用的一些自定义样式

 .custom-table {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
    width:100%;
}

    .custom-table > thead {
        background-color: #3e5977;
        color: white;
    }

    .custom-table > tbody {
        background-color: #97c7fb;
        color: white;
        font-weight: bold;

    }



    .custom-table > tbody > tr > td > button {
        background-color: #3e5977;
        border-color: #ddd;
    }

        .custom-table > tbody > tr > td > button:hover {
            background-color: #7191b4;
            border-color: #ddd;
        }

        .custom-table > tbody > tr > td > button > svg {
            color: #fdba9f;
        }

        .custom-table > tbody > tr:nth-child(even) {
            background-color: #43515f75;
        }

        .custom-table > tbody > tr:nth-child(odd) {
            background-color: #2c3b4b8f;
        }

我不明白为什么要这么做，我认为这是“表响应”类的原因，但不是有罪的