Styling datatables to not go out of screen

Question

I am using the jQuery DataTables.

What I want my table to appear like always (original state upon load):

When I am clicking on headers I sometimes end up in a situation like this:

As can be seen, it goes out of screen bounds.

What I want is that the column width is fixed and the entire table width is set to maximum the size of the first screenshot. It has to be responsive when the browser is becoming smaller.

This is the code I have: in my head.php

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/r-2.2.0/datatables.min.css"/>    
<script defer="defer" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script defer="defer" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script defer="defer" type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/r-2.2.0/datatables.min.js"></script>

And in the view I've got the following:

<div class="content">
    <div class="container">
        <div class="row">
            <table id="table_id" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th>Titel</th>
                    <th>Postcode</th>
                    <th>Stad/gemeente</th>
                    <th>Straat en nummer</th>
                    <th>Zichtbaarheids startdatum</th>
                    <th>Zichtbaarheids einddatum</th>
                    <th>Activiteit startdatum</th>
                    <th>Activiteit einddatum</th>
                    <th>Aantal keer bekeken</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>
                <?php
                foreach ($vacancies as $vac) {
                    echo "<tr>";
                    echo "<td>$vac->name</td>";
                    echo "<td>$vac->address_postal_code</td>";
                    echo "<td>$vac->address_city</td>";
                    echo "<td>$vac->address_line_1 $vac->address_line_2</td>";
                    echo "<td>$vac->vacancy_visibility_start_date</td>";
                    echo "<td>$vac->vacancy_visibility_end_date</td>";
                    echo "<td>$vac->date_from</td>";
                    echo "<td>$vac->date_to</td>";
                    echo "<td>$vac->watch_counter</td>";
                    echo "<td>$vac->status</td>";
                    echo "</tr>";
                }
                ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

I've tried the following in my javascript:

$('#table_id').DataTable({
        responsive: true,
        "autoWidth": false
    });

Also tried the solution given in another SO post: http://jsfiddle.net/hdnquzk4/4/

Both did nothing to the issue!

edit: I also tried putting the table-responsive class to the table, this creates a horizontal scrollbar at the bottom of the table.

Answer 1

if anyone wants to break data into multi lines, try this:

'columnDefs': [
    {
        'targets': [0,1,2], 
        'render': function (data, type, full, meta) {                         
            var maxLength = 10;
            if (data) {
                if (data.length > maxLength) {
                    var tempData = '';
                    while (data.length > maxLength) {
                        tempData = tempData + data.substring(0, maxLength) + '<br/>';
                        data = data.substring(maxLength);
                    }
                    tempData = tempData + data;
                    return tempData;
                }
                else {
                    return data;
                }                                
                
            }
            else {
                return '';
            }
            
        }
    }
],

Answer 2

That's because You have a long string in your table cells, it's normal that your table would expand, what I suggest you to do is to cut the chain and add three final dots just in case the character limit is exceeded:

PHP Solution:

<?php
    foreach ($vacancies as $vac) {
        echo "<tr>";
        echo '<td title='.$vac->name.'>'. ( strlen($vac->name) > 10 ? substr($vac->name, 0, 10).'...' : $vac->name ) .'</td>';
        ...
        echo "</tr>";
    }
?>

Datatable Solution:

$('#table_id').DataTable({
    'columnDefs': [
        {
        'targets': [0, 1, 2], // target columns are 0, 1 and 2 for example
        'render': function(data, type, full, meta){
                if(type === 'display'){
                    data = typeof data === 'string' && data.length > 10 ? data.substring(0, 10) + '...' : data;
                }

                return data;
            }
        }
    ]
});