CSS - table data not going under fixed table header - Overflow-X

Question

In the Table Fixed Header, I need the all text to go under the fixed header and for the fixed header not to misalign. This works for everything in the second table. However all content in the 2nd table is within the 98% width.

In the 1st table, I have a TD tag where white-space:nowrap keeps all content on 1 line, so when the overflow-x occurs, the fixed header becomes misaligned. How can I fix this fixed header to match the table header and not be misaligned?

So I need this to work when the Overflow-X: Auto occurs. I want the horizontal scrolls so that is fine, but it is the fixed header that gets jumbled.

You may have to change the size of your viewpoint to see this occur

I believe it is probably in the CSS or JQUERY where I need to make the adjustment but cannot figure out how to adjust ....

JSFIDDLE https://jsfiddle.net/rbla/1Ljuycbe/61/

.up:hover {
    cursor:pointer;
}

.tooltip2 {
    position: relative;
    display: inline-block;
    border-bottom: 3px dotted black; /* If you want dots under the hoverable text */
    text-decoration: none; 
    color: #00F;
}

img.cadre {
    border: 3px solid #D2D1D1; 
    border-radius: 4px; 
    width: 125px;
    height: 125px;
}

.tooltip2 .tooltiptext2 { 
    visibility: hidden;
    width: 130px;
    background-color: #fff;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;
    margin-left: 7px;
    position: absolute;
    z-index: 0;
}

.tooltip2:hover .tooltiptext2 {
    visibility: visible;
    cursor:pointer;
 }

.tooltip2 .tooltiptext2 { 
    top: -5px;
    left: 105%; 
 }

 /* Left Arrow */
.tooltip2 .tooltiptext2::after {
     content: " ";
     position: absolute;
     top: 15px;
     right: 100%; /* To the left of the tooltip */
     margin-top: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: transparent white transparent transparent;
 }

  table.blue.fixed {
     z-index: 99;
 }

Answer 1

Well, solution to your specific problem is fairly simple; however, there can be vast improvements to your code, eg instead of cloning the whole table and removing the tbody, etc, but I guess this is out of the scope of this question.

Just add these few css lines:

.blue.fixed {
  width:100%;
  table-layout:fixed;
}

https://jsfiddle.net/1Ljuycbe/84/

Answer 2

$t_fixed.css("width",$this.outerWidth()+"px");
$this.parent().on( 'scroll', function(){
  $t_fixed.css("left",(($this.parent().scrollLeft())*-1)+"px");
});
$( window ).resize(function() {
    $t_fixed.css("width",$this.outerWidth()+"px");
});

There are three thing that you need changed to make this work.

1) The width of the table has to match the width on the original table. The first line of code fixes the column position.

2) When you scroll the table the columns will not match unless you move the cloned header row with the scrolling.

3) ".resize" will fix the table when the viewport is resized.

fiddle