DataTable 超出了我的模态宽度

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();

});

Answer 2

You should set the property overflow-x to auto in <div class="modal-body"> as @monerico commented on your question, this way:

overflow-x:auto;

Additionally, you may want to increase the width of the modal itself to show the complete content of the table.

Please share your CSS for further help.