自舉數據表重疊

我有這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

自舉數據表重疊

回答

相關問題