數據庫jquery - 使用ScrollY時列標題不一致

Question

我正在使用jQuery的DataTables和Bootstrap。所以我遇到的問題是，當我在「完成」和「死亡」標籤之間切換時，「死」標籤的列標題會在左側聚集，直到我點擊它們，然後正確對齊。每次刷新時都會發生這種情況我嘗試了使用CSS：overflow：auto，但是這使得我的整個面板都可以滾動，這是我不想要的。我希望標題在我滾動表格時保持固定。

<div class = 'row'> 
    <div class='col-lg-11'> 

    <div id="pane3" > 
    <ul class="nav nav-tabs"> 
    <li class="active"> 
     <a href="#4a" data-toggle="tab">My Completed</a> 
    </li> 
    <li> 
     <a href="#4b" id="deadTab" data-toggle="tab">Dead Requests</a> 
    </li> 

    </ul> 
    <div class="tab-content"> 
     <div class='tab-pane active' id ="4a"> 
     <!-- <div id="" style=" width: 100%; position:relative; height:200px;"> --> 
      <table id='completed' class="table table-striped table-hover"> 
      <thead> 
      <tr> 
       <th>Req. #</th> 
       <th>Project #</th> 
       <th>Client Name</th> 
       <th>Program</th> 
       <th>Request Type</th> 
       <th>Assignee</th> 
       <th>Completed Date</th> 
       <th>Clone</th> 

      </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td>July</td> 
       <td>Dooley</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>july@example.com</td> 
       <td>6/12/2017</td> 
       <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
      </tr> 
      <tr> 
       <td>July</td> 
       <td>Dooley</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>july@example.com</td> 
       <td>6/12/2017</td> 
       <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
      </tr> 
      <tr> 
       <td>July</td> 
       <td>Dooley</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>july@example.com</td> 
       <td>6/12/2017</td> 
       <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
      </tr> 
      <tr> 
       <td>July</td> 
       <td>Dooley</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>july@example.com</td> 
       <td>6/12/2017</td> 
       <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
      </tr> 
      <tr> 
       <td>July</td> 
       <td>Dooley</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>july@example.com</td> 
       <td>6/12/2017</td> 
       <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
      </tr> 
      <tr> 
       <td>July</td> 
       <td>Dooley</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>july@example.com</td> 
       <td>6/12/2017</td> 
       <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
      </tr> 
      </tbody> 
     </table> 
     <!-- </div> --> 
     </div> 
      <div class='tab-pane' id ="4b"> 
     <!-- <div id="" style=" overflow:auto; position:relative; "> --> 
      <table id='dead' class="table table-striped table-hover"> 
      <thead> 
       <tr> 
       <th>Req. #</th> 
       <th>Project #</th> 
       <th>Client Name</th> 
       <th>Program</th> 
       <th>Request Type</th> 
       <th>Assignee</th> 
       <th>Dead Date</th> 
       <th>Restart</th> 
       </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td>July</td> 
       <td>Dooley</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>july@example.com</td> 
       <td>6/12/2017</td> 
       <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
      </tr> 
      <tr> 
       <td>July</td> 
       <td>Dooley</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>july@example.com</td> 
       <td>6/12/2017</td> 
       <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
      </tr> 
      <tr> 
       <td>July</td> 
       <td>Dooley</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>july@example.com</td> 
       <td>6/12/2017</td> 
       <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
      </tr> 
      <tr> 
       <td>July</td> 
       <td>Dooley</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>july@example.com</td> 
       <td>6/12/2017</td> 
       <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
      </tr> 
      <tr> 
       <td>July</td> 
       <td>Dooley</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>july@example.com</td> 
       <td>6/12/2017</td> 
       <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
      </tr> 
      <tr> 
       <td>July</td> 
       <td>Dooley</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>john@e</td> 
       <td>july@example.com</td> 
       <td>6/12/2017</td> 
       <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
      </tr> 
      </tbody> 
      </table> 
     <!-- </div> --> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

<script> 

$(document).ready(function() { 



    $('#completed').DataTable({ 
    "paging":false, 
    // "fixedHeader": true, 
    "scrollY": "140px", 
    "table-layout":"fixed", 
    "columnDefs":[ 
    {"width":60, "targets":0}, 
    {"width":60, "targets":1}, 
    {"width":60, "targets":2}, 
    {"width":60, "targets":3}, 
    {"width":90, "targets":4}, 
    {"width":90, "targets":5}, 
    {"width":90, "targets":6}, 
    {"width":90, "targets":7}, 
    ] 

    }); 


    $('#dead').DataTable({ 
    "paging":false, 
    "fixedHeader": true, 
    "scrollY": "140px", 
    "table-layout":"fixed", 
    "columnDefs":[ 
    {"width":60, "targets":0}, 
    {"width":60, "targets":1}, 
    {"width":60, "targets":2}, 
    {"width":60, "targets":3}, 
    {"width":90, "targets":4}, 
    {"width":90, "targets":5}, 
    {"width":90, "targets":6}, 
    {"width":90, "targets":7}, 
    ] 

    // "table-layout":"fixed" 



    }); 





}); 



</script> 

Answer 1

的問題是，你的其他選項卡是隱藏的（display: none）。您可以初始化數據表是這個樣子dead標籤後：

$('#completed').DataTable({ 
 
    "paging": false, 
 
    // "fixedHeader": true, 
 
    "scrollY": "140px", 
 
    "table-layout": "fixed", 
 
    "columnDefs": [{ 
 
     "width": 60, 
 
     "targets": 0 
 
    }, 
 
    { 
 
     "width": 60, 
 
     "targets": 1 
 
    }, 
 
    { 
 
     "width": 60, 
 
     "targets": 2 
 
    }, 
 
    { 
 
     "width": 60, 
 
     "targets": 3 
 
    }, 
 
    { 
 
     "width": 90, 
 
     "targets": 4 
 
    }, 
 
    { 
 
     "width": 90, 
 
     "targets": 5 
 
    }, 
 
    { 
 
     "width": 90, 
 
     "targets": 6 
 
    }, 
 
    { 
 
     "width": 90, 
 
     "targets": 7 
 
    }, 
 
    ] 
 

 
}); 
 

 

 

 

 

 

 
$('#deadTab').one('shown.bs.tab', function(e) { 
 
    $('#dead').DataTable({ 
 
    "paging": false, 
 
    "fixedHeader": true, 
 
    "scrollY": "140px", 
 
    "table-layout": "fixed", 
 
    "columnDefs": [{ 
 
     "width": 60, 
 
     "targets": 0 
 
     }, 
 
     { 
 
     "width": 60, 
 
     "targets": 1 
 
     }, 
 
     { 
 
     "width": 60, 
 
     "targets": 2 
 
     }, 
 
     { 
 
     "width": 60, 
 
     "targets": 3 
 
     }, 
 
     { 
 
     "width": 90, 
 
     "targets": 4 
 
     }, 
 
     { 
 
     "width": 90, 
 
     "targets": 5 
 
     }, 
 
     { 
 
     "width": 90, 
 
     "targets": 6 
 
     }, 
 
     { 
 
     "width": 90, 
 
     "targets": 7 
 
     }, 
 
    ] 
 

 
    // "table-layout":"fixed" 
 

 
    }); 
 
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 

 
<div class="container"> 
 
    <div class='row'> 
 
    <div class='col-lg-11'> 
 
     <div id="pane3"> 
 
     <ul class="nav nav-tabs"> 
 
      <li class="active"> 
 
      <a href="#4a" data-toggle="tab">My Completed</a> 
 
      </li> 
 
      <li> 
 
      <a href="#4b" id="deadTab" data-toggle="tab">Dead Requests</a> 
 
      </li> 
 

 
     </ul> 
 
     <div class="tab-content"> 
 
      <div class='tab-pane active' id="4a"> 
 
      <!-- <div id="" style=" width: 100%; position:relative; height:200px;"> --> 
 
      <table id='completed' class="table table-striped table-hover"> 
 
       <thead> 
 
       <tr> 
 
        <th>Req. #</th> 
 
        <th>Project #</th> 
 
        <th>Client Name</th> 
 
        <th>Program</th> 
 
        <th>Request Type</th> 
 
        <th>Assignee</th> 
 
        <th>Completed Date</th> 
 
        <th>Clone</th> 
 

 
       </tr> 
 
       </thead> 
 
       <tbody> 
 
       <tr> 
 
        <td>July</td> 
 
        <td>Dooley</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>july@example.com</td> 
 
        <td>6/12/2017</td> 
 
        <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
 
       </tr> 
 
       <tr> 
 
        <td>July</td> 
 
        <td>Dooley</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>july@example.com</td> 
 
        <td>6/12/2017</td> 
 
        <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
 
       </tr> 
 
       <tr> 
 
        <td>July</td> 
 
        <td>Dooley</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>july@example.com</td> 
 
        <td>6/12/2017</td> 
 
        <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
 
       </tr> 
 
       <tr> 
 
        <td>July</td> 
 
        <td>Dooley</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>july@example.com</td> 
 
        <td>6/12/2017</td> 
 
        <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
 
       </tr> 
 
       <tr> 
 
        <td>July</td> 
 
        <td>Dooley</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>july@example.com</td> 
 
        <td>6/12/2017</td> 
 
        <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
 
       </tr> 
 
       <tr> 
 
        <td>July</td> 
 
        <td>Dooley</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>july@example.com</td> 
 
        <td>6/12/2017</td> 
 
        <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      <!-- </div> --> 
 
      </div> 
 
      <div class='tab-pane' id="4b"> 
 
      <!-- <div id="" style=" overflow:auto; position:relative; "> --> 
 
      <table id='dead' class="table table-striped table-hover"> 
 
       <thead> 
 
       <tr> 
 
        <th>Req. #</th> 
 
        <th>Project #</th> 
 
        <th>Client Name</th> 
 
        <th>Program</th> 
 
        <th>Request Type</th> 
 
        <th>Assignee</th> 
 
        <th>Dead Date</th> 
 
        <th>Restart</th> 
 
       </tr> 
 
       </thead> 
 
       <tbody> 
 
       <tr> 
 
        <td>July</td> 
 
        <td>Dooley</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>july@example.com</td> 
 
        <td>6/12/2017</td> 
 
        <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
 
       </tr> 
 
       <tr> 
 
        <td>July</td> 
 
        <td>Dooley</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>july@example.com</td> 
 
        <td>6/12/2017</td> 
 
        <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
 
       </tr> 
 
       <tr> 
 
        <td>July</td> 
 
        <td>Dooley</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>july@example.com</td> 
 
        <td>6/12/2017</td> 
 
        <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
 
       </tr> 
 
       <tr> 
 
        <td>July</td> 
 
        <td>Dooley</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>july@example.com</td> 
 
        <td>6/12/2017</td> 
 
        <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
 
       </tr> 
 
       <tr> 
 
        <td>July</td> 
 
        <td>Dooley</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>july@example.com</td> 
 
        <td>6/12/2017</td> 
 
        <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
 
       </tr> 
 
       <tr> 
 
        <td>July</td> 
 
        <td>Dooley</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>john@e</td> 
 
        <td>july@example.com</td> 
 
        <td>6/12/2017</td> 
 
        <td><button type="button" class="btn btn-primary btn-xs">View Form</button></td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      <!-- </div> --> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>