Question

大家好日子，

我在使用模态中的数据表时遇到问题。如果它有一些列它可以正常工作，但如果所有列的宽度都大于模态的宽度，它会变得混乱。请看图像

任何帮助将不胜感激

这是我桌子的代码：

<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-->

这是我的剧本：

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

我希望它变成这样：超出列放置在子行内部，只有在单击加号按钮

时才会显示

Answer 1

我遇到了同样的问题，这段代码解决了我的问题。

$(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

您应该将属性overflow-x设置为“{@ 1}}”，如@monerico对您的问题发表评论，这样：

auto

此外，您可能希望增加模式本身的宽度以显示表格的完整内容。

请分享您的CSS以获得进一步的帮助。

DataTable超出了我的模态宽度

2 个答案: