DataTables - 水平滾動條部分覆蓋最後一行

我目前在ASP.Net MVC應用程序中使用JQuery插件DataTables。出於某種原因，當我嘗試使用DataTable的scrollX選項並將其設置爲true時，水平滾動條將部分覆蓋最後一行信息。這有點煩人。有誰知道如何解決這個問題。我被告知這是該插件的一個常見問題，但似乎無法在網絡上找到與此相關的任何內容。DataTables - 水平滾動條部分覆蓋最後一行

以下是一些示例代碼。我將不得不使用一些通用的名稱，由於安全方面的原因：

HTML

<div class="panel-body" style="padding-top: 12px;" overflow-y:hidden"> 

     <table id="example" style="width:100%;" class="table" cellspacing="0"> 
      <thead style="width:100%"> 
       <tr role="row"> 
        <th>Column#</th> 
        <th>Column#</th> 
        <th>Column#</th> 
        <th>Column#</th> 
        <th>Column#</th> 
        <th>Column#</th> 
        <th>Column#</th> 
        <th>Column#</th> 
        <th>Column#</th> 
        <th>Column#</th> 
        <th>Column#</th> 
        <th>Column#</th> 
        <th>Column#</th> 
        <th>Column#</th> 
        <th>Column#</th> 
        <th>Column#</th> 
        <th>Column#</th> 
       </tr> 
      </thead> 
      <tbody> 
      </tbody> 
     </table> 
    </div> 
<script> 
    var table1 = $('#example').DataTable({ 
     "scrollX": true, 
     dom: "Bfrtip", 
     "buttons": [], 
     "processing": true, 
     "serverSide": true, "ajax": {"url": "/Home/MyAction", 
        "type": "POST", 
        "data": function (d) { modD(d);}} 
    }); 
</script>

任何建議，將不勝感激！

來源

2017-06-23 Chet_Steadman

「*當我嘗試使用DataTable的scrollX選項並將其設置爲true，水平滾動條將部分覆蓋信息的最後一行（.. ）我被告知這是這個插件的常見問題*「，這聽起來不對。請設置一個重現問題的小提琴。這是一個起點 - > ** http：//jsfiddle.net/0f9Ljfjr/940/** – davidkonrad

@davidkonrad當然，我會盡力讓這個問題重新出現。 –

@davidkonrad我無法在jsfiddle上重現該問題，但我確實解決了這個問題。我需要做的就是添加BootStrap表 - 響應表的「class」屬性。 –

所以，我真的找出了問題是什麼，或至少找到了解決我的特定問題。請注意，在我的初始文章中，我只使用了Bootstrap「table」類，一旦我添加了「表格響應」以及似乎可以解決問題的功能。不完全知道爲什麼修復它，但嘿沒有投訴在這裏。希望這可以幫助其他人經歷同樣的問題。

下面是編輯代碼：

<div class="panel-body" style="padding-top: 12px;" overflow-y:hidden"> 

    <table id="example" style="width:100%;" class="table table-responsive" cellspacing="0"> 
     <thead style="width:100%"> 
      <tr role="row"> 
       <th>Column#</th> 
       <th>Column#</th> 
       <th>Column#</th> 
       <th>Column#</th> 
       <th>Column#</th> 
       <th>Column#</th> 
       <th>Column#</th> 
       <th>Column#</th> 
       <th>Column#</th> 
       <th>Column#</th> 
       <th>Column#</th> 
       <th>Column#</th> 
       <th>Column#</th> 
       <th>Column#</th> 
       <th>Column#</th> 
       <th>Column#</th> 
       <th>Column#</th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 
</div> 
<script> 
    var table1 = $('#example').DataTable({ 
     "scrollX": true, 
     dom: "Bfrtip", 
     "buttons": [], 
     "processing": true, 
     "serverSide": true, 
     "ajax": {"url": "/Home/MyAction", 
      "type": "POST", 
      "data": function (d) { modD(d);}} 
    }); 
</script>

來源

2017-06-23 17:31:58

DataTables - 水平滾動條部分覆蓋最後一行

回答

相關問題