HTML scrollable table header and body alignment

Question

I've spent a great deal of time and effort on toying and researching this, but I cannot figure out how to perfectly align the column headers with a scrollable table body in HTML. There are other solutions and techniques posted on here and at random places on the web, but they all yielded inconsistent results, especially with random amounts of data.

Here's the JSFiddle.

Note that I have custom CSS applied, but also Bootstrap's CSS. Please expand the result panel to be big enough for the HTML headers to not wrap.

To summarize the HTML, there are two tables - one for the column headers, one for the data cells. Each is wrapped in a <div>, which allows the cells to be scrollable and sets the width of the columns. To account for the scroll bar sometimes showing up (the data is dynamic and I have no idea how much data there will be), the <div> wrapper around the table cells is set to always show the scroll bar, and the wrapper around the table headers has this CSS applied:

.grid-container .column-wrapper {
    width: calc(100% - 16px); /* 16px is the approximate width of the scroll bar */
}

This works on my monitor when the zoom is 100%, but on other monitors, the grid lines are not aligned perfectly - off by maybe 4px. The application that uses these grids uses them extensively, some of which align perfectly while others are off. I unfortunately have not found a pattern for which render correctly and which do not.

I do not want a JavaScript solution - these grids have a lot of JavaScript applied already to make them interactive and sometimes render huge amounts of data (over 7,000 rows) and I don't want to do something funky like looping through the each row, detecting widths, then apply fixes.

Thanks guys, let me know if you need any more information.

EDIT -------------------------------------------------------------------------------------

Our users use Chrome 35.0.1916.153, and I've begun explicitly setting the width of the scrollbar to make sure it's 16px:

::-webkit-scrollbar {
    width: 16px;
    border: 1px solid #ccc;
}

Again, this works on my monitor, but at the moment I cannot tell the results on others. Here's the updated JSFiddle.

Answer 1

Here is my solution to achieve a perfect alignment of the columns between the header and the scrollable body of a table. We don't know the exact scrollbar width so :

1. We make the table header scrollable so that its width is now exactly the same than the body

   table.scrollable thead {
     width:100%;
     overflow-y: scroll;
     position: relative; /* for the absolute positioning of 2.*/
   }
   

2. we mask the header scrolling arrows under 2 pads

   table.scrollable thead:before {
     position: absolute;
     right: 0;
     width: 16px; height: 20px; content: ''; background-color: menu;
     margin-top: 0em;
   }
   table.scrollable thead:after{
     position: absolute;
     right: 0;
     width: 16px; height: 20px; content: ''; background-color: menu;
     margin-top: -1.2em;
   }
   

Here is a sample fiddle using flex css: https://jsfiddle.net/vyp5j257/2/

Or here your fiddle updated: http://jsfiddle.net/9g6xo8L6/1/