自举数据表重叠

我有这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代码

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

来源

2016-10-31 Trafalgar D Law

我打了这个问题。这是由表头的长度和周围的填充引起的。（如果面板很宽，我假设它看起来没问题？）。

解决的方法是将复杂的JS写入“发布者”之类的分词或使用Bootstrap可见性在较大的屏幕上显示正常单词并在较小的屏幕上使用缩写（我发现必须编写额外的媒体查询来清理它）。

您可能需要工具提示或任何解释缩写。你宁愿试图将一夸脱放入一个一品脱罐（如果你想让它们可以订购，那么这是一个小面板的许多标题）。我认为这将花费相当多的手工制作非常具体的媒体查询。

希望有所帮助。

来源

2016-10-31 09:34:50 BeNice

你好，你能提供一些你说的工具提示的链接吗？ –

我只是在谈论一个沼气标准工具提示，请参阅http://getbootstrap.com/javascript/#tooltips）....但我想我已经找到了一个更简单的解决方案。如果你粘贴一个'span'标签并围绕一个'＆nbsp'并在'span'中使用一个'style'来设置一个很小的字体，这个字体应该是自然的破解（但是可惜没有连字符）。 – BeNice

自举数据表重叠

回答

相关问题