DataTable is exceeding my modal width

Question

Good day everyone,

Im having problem working with datatable inside a modal. If it has a few column it works fine but if the width of all the columns is larger than the width of he modal it goes messy. please see the image

any help will be appreciated

Here is code for my table:

<div class="modal" role="dialog" id="modalDeleveryReceiptView_SelectDeliveredBy">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title">Employee Selection</h3>
                </div><!--modal header-->
                <div class="modal-body">
                    <table id="tblDeliveryReceiptView_EmployeeSelection"class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Emp #.</th>
                                <th>First Name</th>
                                <th>Middle Name</th>
                                <th>LastName</th>
                                <th>Gender></th>
                                <th>Job Title</th>
                            </tr>
                        </thead>
                            <tr>
                                <td>EMP-16-000001</td>
                                <td>Exequiel</td>
                                <td>Santos</td>
                                <td>Cuevas</td>
                                <td>Male</td>
                                <td>Dev</td>
                            </tr>
                            <tr>
                                <td>EMP-16-000001</td>
                                <td>Exequiel</td>
                                <td>Santos</td>
                                <td>Cuevas</td>
                                <td>Male</td>
                                <td>Dev</td>
                            </tr>
                            <tr>
                                <td>EMP-16-000001</td>
                                <td>Exequiel</td>
                                <td>Santos</td>
                                <td>Cuevas</td>
                                <td>Male</td>
                                <td>Dev</td>
                            </tr>

                    </table><!--Employee Selection table-->
                </div><!--modal body-->
            </div><!--modal content-->
        </div><!--modal dialog-->
    </div><!--modal Select Delivered By-->

Here is my Script:

$('#tblDeliveryReceiptView_EmployeeSelection').DataTable({
    "paging": false,
    "info": false,
    "searching": true,
    "autoWidth": false
});

I want it to become like this: Where the exceeding columns is placed inside a child row that will only be visible if you click the plus button

Answer 1

I had the same problem and this code fixed my problem.

$(modal-selector).on('shown.bs.modal', function () {

  var table = $('#tblDeliveryReceiptView_EmployeeSelection').DataTable({
    paging: false,
    info: false,
    searching: true,
    autoWidth: false
 });

 table.columns.adjust().draw();

});