javascriptなしでコンテナの後ろに絶対テーブルヘッダをクリップすることは可能ですか？

Question

テーブルにスティッキーヘッダーを実装しようとしています。以下の例では、がない場合は、のコンテナの後ろにヘッダをクリップすることは可能ですか？

$(document).ready(function() { 
 
    $('.grid-body').scroll(function(e) { 
 
    $('thead').css("left", -$(".grid-body").scrollLeft() + 8); 
 
    }); 
 
});

.container { 
 
    background-color:#ffcccc; 
 
    width:150px; 
 
} 
 
.grid-header { 
 
    width:100%; 
 
    overflow:hidden; 
 
} 
 
.grid-body { 
 
    height:200px; 
 
    overflow:auto; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
} 
 
td, th { 
 
    width: 100px; 
 
    min-width: 100px; 
 
    background-color: #e0e0e0; 
 
} 
 
thead { 
 
    background-color:#ccffcc; 
 
    position:absolute; 
 
} 
 
tbody { 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="grid-header"> 
 
     <table id="callLogExplorer"> 
 
     <thead> 
 
      <tr> 
 
      <th>head1</th> 
 
      <th>head2</th> 
 
      <th>head3</th> 
 
      </tr> 
 
     </thead> 
 
     </table> 
 
    </div> 
 
    <div class="grid-body"> 
 
     <table> 
 
     <tbody> 
 
      <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      </tr> 
 
      <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      </tr> 
 
      <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      </tr> 
 
      <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      </tr> 
 
      <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      </tr> 
 
      <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      </tr> 
 
      <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      </tr> 
 
      <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      </tr> 
 
      <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      </tr> 
 
      <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      </tr> 
 
      <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      </tr> 
 
      <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 

 
    </div>

Answer 1

ちょうどあなたの場合.containerには、あなたのコンテナのdivにposition: relativeとoverflow: hiddenを追加したり、JavaScriptで追加されている8つの画素を削除します。

$(document).ready(function() { 
 
    $('.grid-body').scroll(function(e) { 
 
    $('thead').css("left", -$(".grid-body").scrollLeft()); 
 
    }); 
 
});

.container { 
 
    position: relative; 
 
    background-color: #ffcccc; 
 
    width: 150px; 
 
    overflow: hidden; 
 
} 
 

 
.grid-header { 
 
    width: 100%; 
 
} 
 

 
.grid-body { 
 
    height: 200px; 
 
    overflow: auto; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
} 
 

 
td, 
 
th { 
 
    width: 100px; 
 
    min-width: 100px; 
 
    background-color: #e0e0e0; 
 
} 
 

 
thead { 
 
    background-color: #ccffcc; 
 
    position: absolute; 
 
} 
 

 
tbody {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="grid-header"> 
 
    <table id="callLogExplorer"> 
 
     <thead> 
 
     <tr> 
 
      <th>head1</th> 
 
      <th>head2</th> 
 
      <th>head3</th> 
 
     </tr> 
 
     </thead> 
 
    </table> 
 
    </div> 
 
    <div class="grid-body"> 
 
    <table> 
 
     <tbody> 
 
     <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
     </tr> 
 
     <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
     </tr> 
 
     <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
     </tr> 
 
     <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
     </tr> 
 
     <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
     </tr> 
 
     <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
     </tr> 
 
     <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
     </tr> 
 
     <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
     </tr> 
 
     <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
     </tr> 
 
     <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
     </tr> 
 
     <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
     </tr> 
 
     <tr> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
      <td>asdfasd fas</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 

 
</div>