Html Table header won't appear on max width

Question

I have a table using jquery datatable plugin and for some reason the header appears like this, if i click sort or some other action the header automatically resizes to max-width.

here is the code

<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>';
                        }
                    }
                ]
            });
        });

and some custom styles i apply

 .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;
        }

I don't understand why does it do this, i thought it was 'cause of the class "table-responsive" but wasn't the guilty one

You're adding the content to the outer div instead of the table — Tomm, May 08 '19 at 07:39
Could you be more detailed please? I look at my code and i always did datatables like this, i must be missing something i can't see — Jackal, May 08 '19 at 07:44
This is a known issue, you have to use `.columns.adjust();`, check this: https://stackoverflow.com/questions/17237812/datatable-jquery-table-header-width-not-aligned-with-body-width — Dani, May 08 '19 at 08:03
And other thing... you should call datatable constructor inside `document ready`, not inside a function like `$(function () {` — Dani, May 08 '19 at 09:55
I thought this was the short form in jquery for document ready — Jackal, May 08 '19 at 11:28

Html Table header won't appear on max width

0 Answers0