alignment issue with html table

Question

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 vertical scroll bar is visible the column border is slightly misaligned to fit the scrollbar. Please advice how to fix it. I'm going through many links but with no luck. Please find the demo here

Code:

    <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 code:

  * {
        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;

    }

How to fix and show the border without any alignment issue even when the vertical scroll is on.Any suggestions would be helpful.

@XYZ - I have not get you , can you please edit the plunker https://plnkr.co/edit/cAb16ZbcwiDk39wbQnXu?p=preview. Thanks. — scrit, May 15 '17 at 19:12
Can we make the scrollbar attached to the last column border.@XYZ — scrit, May 15 '17 at 19:24
my mistake. check this https://jsfiddle.net/a8a647v8/1/ @scrit — XYZ, May 15 '17 at 19:27
@XYZ - I have used the same code as you suggested in my application and plunker https://plnkr.co/edit/MPhGHTRMZiRhDiw3Zpl7?p=preview but still the columns are not aligned.Please advice.Thanks — scrit, May 15 '17 at 19:30
@XYZ - your code is working in jsfiddle but not in plunker https://plnkr.co/edit/MPhGHTRMZiRhDiw3Zpl7?p=preview or my local application, any suggestions would be helpful. — scrit, May 15 '17 at 19:35
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/144285/discussion-between-xyz-and-scrit). — XYZ, May 15 '17 at 19:38

score 2 · Accepted Answer · answered May 15 '17 at 19:51

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);
}

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/

Please find my EDITED section in the post above. I could not able to show fixed header with vertical scroll on for dynamic data without misalignment. Any suggestions would be helpful.Thanks. — scrit, May 16 '17 at 03:38
I dont know if it is a proper solutin.Check this https://jsfiddle.net/8kj14jh0/1/ — XYZ, May 16 '17 at 06:36

score 0 · Answer 2 · answered Feb 14 '21 at 06:46

<thead style="overflow-y: scroll;">
<tbody style="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.

alignment issue with html table

2 Answers2

Linked