Проблема с прокруткой с помощью jQuery

Question

У меня проблема с использованием scrollLeft в jQuery, я бы хотел прокрутить фиксированный заголовок в одно и то же время к элементу body, но заголовок длиннее, чем тело, поэтому есть проблема в конце прокручивать с шириной собственности ...

JSFiffle: JSFiddle using SCSS and jQuery

Мои

(function($){ 
 
    $(document).ready(function(){ 
 
    function resizeHeader(){ 
 
     var fixedCell = document.querySelector('.grid4 .fixed').children; 
 
     for(var i = 0; i < fixedCell.length; i++){ 
 
     var newWidth = fixedCell[i].offsetWidth; 
 
     document.querySelector('.grid4 .cloned').children[i].style.width = newWidth; 
 
     } 
 
    } 
 
    resizeHeader(); 
 
    $('.grid4 .scroll').scroll(function(){ 
 
     var $this = $(this); 
 
     $('.grid4 .cloned').animate({ 
 
     scrollLeft: $this.scrollLeft() 
 
     },0); 
 
    }); 
 
    }); 
 
})(jQuery);

.grid4{ 
 

 
    .grid{ 
 
    position: relative; 
 

 
    .wrap{ 
 
     position: absolute; 
 
     top: 20px; 
 
     left: 0; 
 
     height: 200px; 
 
     width: 150px; 
 

 
     .scroll{ 
 
     height: 100%; 
 
     width: 100%; 
 
     overflow-x: auto; 
 

 
     .table{ 
 
      display: table; 
 
      table-layout: fixed; 
 
      margin: -20px 0 0 0; 
 

 
      .header{ 
 
      display: table-header-group; 
 
      background-color: green; 
 

 
      .row{ 
 
       display: table-row; 
 

 
       .cell{ 
 
       display: table-cell; 
 
       } 
 
      } 
 

 
      .cloned{ 
 
       position: absolute; 
 
       left: 0; 
 
       top: -20px; 
 
       background-color: red; 
 
       display: table-row; 
 
       width: 150px; 
 
       overflow-x: hidden; 
 
      } 
 
      } 
 

 
      .body{ 
 
      display: table-row-group; 
 
      background-color: red; 
 

 
      .row{ 
 
       display: table-row; 
 

 
       .cell{ 
 
       display: table-cell; 
 
       text-overflow: ellipsis; 
 
       } 
 
      } 
 
      } 
 
     } 
 
     } 
 
    } 
 
    } 
 
}

 <div class="grid4"> 
 
      <div class="grid"> 
 
      <div class="wrap"> 
 
       <div class="scroll"> 
 
       <div class="table"> 
 
        <div class="header"> 
 
        <div class="row fixed"> 
 
         <div class="cell" style="width: 100px;">Colonne</div> 
 
         <div class="cell">Colonne</div> 
 
         <div class="cell">Colonne</div> 
 
         <div class="cell">Colonne</div> 
 
         <div class="cell">Colonne</div> 
 
         <div class="cell">Colonne</div> 
 
        </div> 
 
        <div class="row cloned"> 
 
         <div class="cell">Colonne</div> 
 
         <div class="cell">Colonne</div> 
 
         <div class="cell">Colonne</div> 
 
         <div class="cell">Colonne</div> 
 
         <div class="cell">Colonne</div> 
 
         <div class="cell">Colonne</div> 
 
        </div> 
 
        </div> 
 
        <div class="body"> 
 
        <div class="row"> 
 
         <div class="cell">Ligne #1</div> 
 
         <div class="cell">Ligne #1</div> 
 
         <div class="cell">Ligne #1</div> 
 
         <div class="cell">Ligne #1</div> 
 
         <div class="cell">Ligne #1</div> 
 
         <div class="cell">Ligne #1</div> 
 
        </div> 
 
        <div class="row"> 
 
         <div class="cell">Ligne #4</div> 
 
         <div class="cell">Ligne #4</div> 
 
         <div class="cell">Ligne #4</div> 
 
         <div class="cell">Ligne #4</div> 
 
         <div class="cell">Ligne #4</div> 
 
         <div class="cell">Ligne #4</div> 
 
        </div> 
 
        <div class="row"> 
 
         <div class="cell">Ligne #1</div> 
 
         <div class="cell">Ligne #1</div> 
 
         <div class="cell">Ligne #1</div> 
 
         <div class="cell">Ligne #1</div> 
 
         <div class="cell">Ligne #1</div> 
 
         <div class="cell">Ligne #1</div> 
 
        </div> 
 
        <div class="row"> 
 
         <div class="cell">Ligne #2</div> 
 
         <div class="cell">Ligne #2</div> 
 
         <div class="cell">Ligne #2</div> 
 
         <div class="cell">Ligne #2</div> 
 
         <div class="cell">Ligne #2</div> 
 
         <div class="cell">Ligne #2</div> 
 
        </div> 
 
        <div class="row"> 
 
         <div class="cell">Ligne #3</div> 
 
         <div class="cell">Ligne #3</div> 
 
         <div class="cell">Ligne #3</div> 
 
         <div class="cell">Ligne #3</div> 
 
         <div class="cell">Ligne #3</div> 
 
         <div class="cell">Ligne #3</div> 
 
        </div> 
 
        <div class="row"> 
 
         <div class="cell">Ligne #4</div> 
 
         <div class="cell">Ligne #4</div> 
 
         <div class="cell">Ligne #4</div> 
 
         <div class="cell">Ligne #4</div> 
 
         <div class="cell">Ligne #4</div> 
 
         <div class="cell">Ligne #4</div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div>

код:

Answer 1

* ОБНОВЛЕНО * ИТАК оставить заголовок, где она есть, но добавить overflow:hidden, как предложено в комментариях

.cloned{ 
    position: absolute; 
    left: 0; 
    top: -20px; 
    background-color: red; 
    display: table-row; 
    width: 133px; // Should be 133px not 132px 
    overflow: hidden; // ADD 
} 

Рабочая JSFiddle за то, что вы хотите: http://jsfiddle.net/gj7ejp10/7/