javascript - Bootstrap 数据表重叠

Question

我在下面有两个数据表，您可以看到其中一个与数据表重叠，另一个需要编辑宽度。我尝试添加 width 但对我的第一个数据表没有任何影响。关于这两个问题有什么建议吗？

HTML

    <div class="row">
    <div class="col-lg-6">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-lg-6">
                        <i class="fa fa-list fa-fw"></i>Borrower Name
                    </div>
                </div>
            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                <div class="dataTable_wrapper">
                    <div class="col-lg-6">
                        <table class="table table-striped table-bordered table-hover table-responsive nowrap"
                            role="grid" style="width: 100%;" id="dtBorrowerName">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@*</div>
<div class="row">*@
    <div class="col-lg-6">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-lg-6">
                        <i class="fa fa-list fa-fw"></i>Book
                    </div>
                </div>
            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                <div class="dataTable_wrapper">
                    <div class="col-lg-6">
                        <table class="table table-striped table-bordered table-hover table-responsive nowrap"
                            role="grid" style="width: 10%;" id="dtBook">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS 代码

var dtBorrowerName = $('#dtBorrowerName').DataTable({
    responsive: true,
    processing: true,
    info: true,
    search: true,
    stateSave: true,
    order: [[1, "desc"]],
    lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
    ajax: { "url": "/LS/GetBorrower" },
    columns:


   [
                { data: "BorrowerID", title: "", visible: false, searchable: false },
                { data: "IDNo", title: "ID Number" },
                { data: "Name", title: "Complete Name", sClass: "alignRight", width: " 100px" },
                { data: "BookTransactionHdrID", title: "BookTransactionHdrID", visible: false, searchable: false }
            ]
    });


function GetStudentBook(getId) {

        if (getId != 0 || getId != undefined || getId != "") {
            dtStudBook = $('#dtBook').DataTable({
                responsive: true,
                processing: true,
                info: true,
                retrieve: true,
                destroy: true,
                search: true,
                stateSave: true,
                lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
                ajax: {
                    "url": "/LS/GetStudentBook",
                    "data": function (d) {
                        d.BookTransactionDtlID = getId;
                   }
                },
                columns:
        [
                { data: "BookId", title: "", visible: false, searchable: false },
                //{ data: "Barcode", title: "Barcode",  searchable: false },
                { data: "Author", title: "Author" }
//                { data: "Title", title: "Title", sClass: "alignRight" },
//                { data: "DatePublish", title: "Date Publish", sClass: "alignRight" },
//                { data: "PlacePublish", title: "Place Publish" },
//                { data: "NameOfPublisher", title: "Name Of Publisher"},
//                { data: "ISBN", title: "ISBN"},
//                { data: "BookTransactionDtlID", title: "", visible: false }

        ]
            });
        }
        else {
            //do nothing..
        }
    }

Answer 1

我遇到了这个问题。这是由表头的长度及其周围的填充引起的。 (我假设如果面板很宽，看起来还不错？)。

解决方案是编写复杂的 JS 来分割“Publisher”之类的单词，或者(就像我最后所做的那样)使用 Bootstrap 可见性在较大的屏幕上显示普通单词并在较小的屏幕上使用缩写(我发现我必须编写额外的代码)媒体查询来清理这个)。

您可能需要工具提示或其他任何内容来解释您的缩写。您宁愿尝试将一夸脱放入一品脱壶中(如果您希望它们可订购，那么对于一个小面板来说，这是很多标题等)我认为这将需要大量的手工制作和非常具体的媒体查询。

希望有帮助。