DataTable宽度超出了面板

Question

每个人都过得愉快。

我是ASP.Net MVC 4的新手，我在桌面上使用DataTable插件，我遇到了以下问题。  1. DataTable Width超出了包含它的面板的宽度。  2.它没有生成一个子行，据说会显示不适合面板宽度的列。

任何帮助将不胜感激。

这是我的表格代码（html）

<div class="modal" role="dialog" id="modalCustomerDetails_Location"><!--Modal for Customer Details - Location-->
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title"><img class="crud" src="~/Images/profile.png" />Customer's Location</h3>
                </div><!--Modal Header-->
                <div class="modal-body">
                    <div class="form-group row well" id="wellCustomerName_Transaction">
                        <label class="control-label col-lg-3">Customer Name</label>
                        <div class="col-lg-9">
                            <input type="text" class="form-control col-lg-12" value="Quiel Cuevas" disabled />
                        </div>
                    </div>

                    <div class="panel panel-green ">
                        <div class="panel-heading">
                            <h4 class="panel-title">Customer's Transaction</h4>
                        </div><!--Panel heading-->
                        <div class="panel-body">
                            <table id="tblCustomersLocation" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Location Name</th>
                                <th>Location Type</th>
                                <th>Address</th>
                                <th>Area</th>
                                <th>Email</th>
                                <th>Phone 1</th>
                                <th>Phone 2</th>
                                <th>Fax No.</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tr>
                            <td>Mandaluyong</td>
                            <td>Residential</td>
                            <td>Pleasant Hills......</td>
                            <td>NCR</td>
                            <td>quiel@yahoo.com.ph</td>
                            <td>09090909090</td>
                            <td>09909090909</td>
                            <td>123123123</td>
                            <td>
                                <a href='#' data-toggle="modal">Contacts</a> |
                                <a href='#' data-toggle="modal">Transactions</a> |
                                <a href='#' data-toggle="modal">Issued Item</a> |
                            </td>
                        </tr>

                    </table>
                        </div><!--Panel Body-->
                    </div>

                </div> <!--Modal Body-->
            </div><!--Modal Content-->
        </div><!--Modal Dialog-->
    </div>

这是我的剧本

$(document).ready(function () {
    $('#tblCustomersLocation').DataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'copyHtml5',
                text: '',
                titleAttr: 'Create New Location'
                //action: function (e, dt, node, config) {
                //    $('body').addClass('modal-open');
                //    $('#generalCusModal12').show();
                //}
            },
            {
                extend: 'csvHtml5',
                text: '',
                titleAttr: 'Edit Existing Location'
                //action: function (e, dt, node, config) {
                //    $('body').addClass('modal-open');
                //    $('#generalCusModal').modal('show');
                //}
            },
            {
                extend: 'csvHtml5',
                text: '',
                titleAttr: 'Set Default Location'
            },
            {
                extend: 'pdfHtml5',
                text: '',
                titleAttr: 'Refresh Records'
            }
        ],
        "paging": false,
        "info": false,
        "searching": false,
        "bAutoWidth": false
    });
});

顺便说一句。该表位于面板内，面板位于模态内。