title: CSS - table data not going under fixed table header - Overflow-X
body: <p>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. </p>
  
  <p>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?</p>
  
  <p>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.</p>
  
  <p>You may have to change the size of your viewpoint to see this occur</p>
  
  <p>I believe it is probably in the CSS or JQUERY where I need to make the adjustment but cannot figure out how to adjust ....</p>
  
  <p>JSFIDDLE <a href="https://jsfiddle.net/rbla/1Ljuycbe/61/" rel="noreferrer">https://jsfiddle.net/rbla/1Ljuycbe/61/</a></p>
  
  <pre><code>.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;
   }
  </code></pre>