Bootstrap Data Table Overlap

Question

I have this 2 data tables below as you can see one of them is overlapping the data table and the other one is need to edit the width. I try to add width but don't have any effect on my first data table. Any suggestion about this two problems?.

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

I hit this problem. It is caused by the length of the table headers and the padding around them. (I am assuming that it looks OK if the panel is wide?).

The solution is to write complicated JS to split words like "Publisher" or (as I did in the end) use Bootstrap visibility to show normal words on larger screens and use abbreviations on smaller screens (I found I had to write extra media queries to clean this up).

You may need a tooltip or whatever to explain your abbreviations. You are rather trying to fit a quart into a pint pot (that is a lot of headings for a small panel if you want them orderable etc) I think it will take quite a bit of hand crafting with very specific media queries.

Hope that helps.