jQuery DataTable too wide, width will not update

Question

I got assigned to a project where I'm working with jQuery DataTables to grab information from a database and display it onto the screen.

Here's an attached screenshot of the application (I had to censor some field names and some data there, I apologize)

I attempted to manually set the width of the table columns here with the sWidth: 50px on the bit following the render for the buttons:

$(document).ready(function () {
table = $("#customerDatatable").DataTable({
    "processing": true,
    "serverSide": true,
    "filter": true,
    "ajax": {
        "url": "/api/customer",
        "type": "POST",
        "datatype": "json"
    },
    "columnDefs": [{
        "targets": 0,
        "visible": false,
        "searchable": false,
        "defaultContent": "NULL"
    }],
    "columns": [

        { "data": "dbField", "name": "Id", "autoWidth": false },
        {
            "render": function (data, row) {
                //return "<a href='#' class='btn btn-danger' onclick=DeleteCustomer('" + row.id + "'); >Delete</a>";
                return "<a id='offcanvasButton' class='btn btn - primary' data-bs-toggle='offcanvas' href='#offcanvasExample' role='button' aria-controls='offcanvasExample'>Link with href</a >";
            }

        },
        { "data": "dbField", "name": "dbField", "sWidth": "50px", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },

    ]
});

And then I also attempted to manually set the size of the table via HTML (again sorry I had to obfuscate the names between the th tags):

    <div width="100%" style="margin:0 auto;">
    <table id="customerDatatable" class="table table-striped table-bordered dt-responsive nowrap" width="75%" cellspacing="0">
        <thead>
            <tr>

                <th>ThName</th>
                <th>Actions</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>


            </tr>
        </thead>
    </table>
</div>

I still cannot figure out my issue despite looking at a few questions on Stack Overflow, I don't know if I'm just not understanding what I need to ask or if there's just something I'm not doing here.

Thanks in advance!

Answer 1

I see that there is a discussion on datatables about this topic. https://datatables.net/forums/discussion/41870/column-width-not-working

From what I've seen there is a solution if you want to fix the column's width.

The way the column widths work in DataTables is that DataTables will create a "worst case" table when it is initialised. Whice means that the widths you give are used, but if the table's content doesn't fit into them, or they don't add up correctly, the browser and DataTables will overrule you and use the widths only as a guide.

Is it possible that the content is long but you still want to use fixed width? if so, Add to your css:

table-layout: fixed;

Check out Alan comment on the discussion for more information he's the admin.

One more thing: disable "autowidth" is not recommended - can cause a problem with columns layout.

Answer 2

I had the same problem and solved it with setting

td {
    white-space: pre-wrap !important;
    word-wrap:break-word;
}