Question

我有以下2个数据表，因为您可以看到其中一个数据表与数据表重叠，另一个需要编辑宽度。我尝试添加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 CODE

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可见性在较大的屏幕上显示正常的单词并在较小的屏幕上使用缩写（我发现我必须额外写媒体查询来清理它。）

您可能需要工具提示或其他任何内容来解释您的缩写。你宁愿尝试将一夸脱装入一个品脱罐（如果你想要它们可订购的话，这是一个小面板的很多标题）我认为这将需要相当多的手工制作与非常具体的媒体查询。

希望有所帮助。

Bootstrap数据表重叠

1 个答案: