Alignment Issue With Html Table

I am working on jQuery application. I have a column border alignment issue when working with tables with fixed header and vertical scrollbar on. When number of rows are more and ve

Solution 1:

The table alignment changes because of the scrolbar width of table is less than the fixed table.One way is to find the width of the table in scroll and set that width to the fixed table

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

functionsetTableWidth(){
    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: 8px16px;
        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;

    }

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

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

Solution 2:

<theadstyle="overflow-y: scroll;"><tbodystyle="overflow-y: scroll;">

You can force the scrollbars to be always visible on both the thead and tbody elements.

Assuming you set the columns widths the same in both sections, the columns line up perfectly. Without the scroll on the header, when the scroll is visible on the body, the columns are offset by the width of the scrollbar, and the offset gets worse towards the right hand side.