對齊問題與html表

Question

我正在jQuery應用程序。在桌面上使用固定標題和垂直滾動條時，我有一個列邊框對齊問題。 當行數更多並且垂直滾動條可見時，列邊框稍微不對齊以適應滾動條。 請指教如何解決它。我正在經歷很多鏈接，但沒有運氣。 請找到演示 here

代碼：

<div class="pane pane--table1"> 
     <div class="pane-hScroll"> 
      <table> 
       <thead> 
       <th style="text-align: center;">Header1</th> 
       <th style="text-align: center;">Header2</th> 
       <th style="text-align: center;">Header3</th> 

       </thead> 
      </table> 
      <div class="pane-vScroll"> 
       <table> 
        <tbody> 
        <tr> 
         <td style="text-align: center;">Dataaaa</td> 
         <td style="text-align: center;">Data</td> 
         <td style="text-align: center;">Data</td> 
        </tr> 
         <tr> 
         <td style="text-align: center;">Dataaaa</td> 
         <td style="text-align: center;">Data</td> 
         <td style="text-align: center;">Data</td> 
        </tr> 
         <tr> 
         <td style="text-align: center;">Dataaaa</td> 
         <td style="text-align: center;">Data</td> 
         <td style="text-align: center;">Data</td> 
        </tr> 
         <tr> 
         <td style="text-align: center;">Dataaaa</td> 
         <td style="text-align: center;">Data</td> 
         <td style="text-align: center;">Data</td> 
        </tr> <tr> 
         <td style="text-align: center;">Dataaaa</td> 
         <td style="text-align: center;">Data</td> 
         <td style="text-align: center;">Data</td> 
        </tr> <tr> 
         <td style="text-align: center;">Dataaaa</td> 
         <td style="text-align: center;">Data</td> 
         <td style="text-align: center;">Data</td> 
        </tr> 
         <tr> 
         <td style="text-align: center;">Dataaaa</td> 
         <td style="text-align: center;">Data</td> 
         <td style="text-align: center;">Data</td> 
        </tr> 
         <tr> 
         <td style="text-align: center;">Dataaaa</td> 
         <td style="text-align: center;">Data</td> 
         <td style="text-align: center;">Data</td> 
        </tr> 
         <tr> 
         <td style="text-align: center;">Dataaaa</td> 
         <td style="text-align: center;">Data</td> 
         <td style="text-align: center;">Data</td> 
        </tr> <tr> 
         <td style="text-align: center;">Dataaaa</td> 
         <td style="text-align: center;">Data</td> 
         <td style="text-align: center;">Data</td> 
        </tr> 

        </tbody></table></div></div> 
</div> 

CSS代碼：

* { 
     box-sizing: border-box; 
    } 
    body { 
     font: 14px/1 Arial, sans-serif; 
    } 
    table { 
     border-collapse: collapse; 
     background: white; 
     table-layout: fixed; 
     width: 100%; 
    } 
    th, td { 
     padding: 8px 16px; 
     border: 1px solid #ddd; 
     width: 160px; 
     overflow: hidden; 
     white-space: nowrap; 
    } 
    .pane { 
     background: #eee; 
    } 
    .pane-hScroll { 
     overflow: auto; 
    } 
    .pane-vScroll { 
     overflow-y: auto; 
     overflow-x: hidden; 
     height: 30%; 
    } 

    table { table-layout:fixed;width: 100% } 
    td { 
     white-space: -o-pre-wrap; 
     word-wrap: break-word; 
     white-space: pre-wrap; 
     white-space: -moz-pre-wrap; 
     white-space: -pre-wrap; 

    } 

如何修復和展示的邊界，甚至沒有當垂直滾動是任何對齊問題on.Any建議將會有所幫助。

Answer 1

，因爲表的scrolbar寬度的表對準的變化小於所述固定table.One方式是找到在滾動表的寬度，並設置寬度與固定臺

if($('.pane-vScroll').prop('scrollHeight') >$('.pane-vScroll').height()){ 
    var width = $('.pane-vScroll table').width(); 
    $('.pane-hScroll table:first').width(width); 
} 

function setTableWidth(){ 
 
    if($('.pane-vScroll').prop('scrollHeight') >$('.pane-vScroll').height()){ 
 
     var width = $('.pane-vScroll table').width(); 
 
     $('.pane-hScroll table:first').width(width); 
 
    } 
 

 
} 
 
$(function(){ 
 
    setTableWidth(); 
 
    $(window).resize(function() { 
 
    setTableWidth(); 
 
    }) 
 

 
})

* { 
 
     box-sizing: border-box; 
 
    } 
 
    body { 
 
     font: 14px/1 Arial, sans-serif; 
 
    } 
 
    table { 
 
     border-collapse: collapse; 
 
     background: white; 
 
     table-layout: fixed; 
 
     width: 100%; 
 
    } 
 
    th, td { 
 
     padding: 8px 16px; 
 
     border: 1px solid #ddd; 
 
     width: 160px; 
 
     overflow: hidden; 
 
     white-space: nowrap; 
 
    } 
 
    .pane { 
 
     background: #eee; 
 
    } 
 
    .pane-hScroll { 
 
     overflow: auto; 
 
    } 
 
    .pane-vScroll { 
 
     overflow-y: auto; 
 
     overflow-x: hidden; 
 
     height: 150px; 
 
    } 
 
    
 
    table { table-layout:fixed;width: 100% } 
 
    td { 
 
     white-space: -o-pre-wrap; 
 
     word-wrap: break-word; 
 
     white-space: pre-wrap; 
 
     white-space: -moz-pre-wrap; 
 
     white-space: -pre-wrap; 
 

 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pane pane--table1"> 
 
     <div class="pane-hScroll"> 
 
      <table> 
 
       <thead> 
 
       <th style="text-align: center;">Header1</th> 
 
       <th style="text-align: center;">Header2</th> 
 
       <th style="text-align: center;">Header3</th> 
 
     
 
       </thead> 
 
      </table> 
 
      <div class="pane-vScroll"> 
 
       <table> 
 
        <tbody> 
 
        <tr> 
 
         <td style="text-align: center;">Dataaaa</td> 
 
         <td style="text-align: center;">Data</td> 
 
         <td style="text-align: center;">Data</td> 
 
        </tr> 
 
         <tr> 
 
         <td style="text-align: center;">Dataaaa</td> 
 
         <td style="text-align: center;">Data</td> 
 
         <td style="text-align: center;">Data</td> 
 
        </tr> 
 
         <tr> 
 
         <td style="text-align: center;">Dataaaa</td> 
 
         <td style="text-align: center;">Data</td> 
 
         <td style="text-align: center;">Data</td> 
 
        </tr> 
 
         <tr> 
 
         <td style="text-align: center;">Dataaaa</td> 
 
         <td style="text-align: center;">Data</td> 
 
         <td style="text-align: center;">Data</td> 
 
        </tr> <tr> 
 
         <td style="text-align: center;">Dataaaa</td> 
 
         <td style="text-align: center;">Data</td> 
 
         <td style="text-align: center;">Data</td> 
 
        </tr> <tr> 
 
         <td style="text-align: center;">Dataaaa</td> 
 
         <td style="text-align: center;">Data</td> 
 
         <td style="text-align: center;">Data</td> 
 
        </tr> 
 
         <tr> 
 
         <td style="text-align: center;">Dataaaa</td> 
 
         <td style="text-align: center;">Data</td> 
 
         <td style="text-align: center;">Data</td> 
 
        </tr> 
 
         <tr> 
 
         <td style="text-align: center;">Dataaaa</td> 
 
         <td style="text-align: center;">Data</td> 
 
         <td style="text-align: center;">Data</td> 
 
        </tr> 
 
         <tr> 
 
         <td style="text-align: center;">Dataaaa</td> 
 
         <td style="text-align: center;">Data</td> 
 
         <td style="text-align: center;">Data</td> 
 
        </tr> <tr> 
 
         <td style="text-align: center;">Dataaaa</td> 
 
         <td style="text-align: center;">Data</td> 
 
         <td style="text-align: center;">Data</td> 
 
        </tr> 
 
        
 
        </tbody></table></div></div> 
 
</div>

https://jsfiddle.net/ffr991oe/1/