CSSまたはJQueryで水平スクロールした2つの固定列ヘッダー

Question

同じページに2つの別々のテーブルを作成して、スクロール時に垂直スクロールコンテンツまたはページの上部に「スティック」する固定ヘッダーを作成しようとしていますダウン。

私が取り組んでいる問題は、テーブルの1つに水平スクロールのコンテンツがあることです。

これは次のようなものです。私が修正したいのは、水平スクロールテーブルの "JAPAN"、 "Customer"列、次に "Producer"、 "PR" & "Q"列です。これはCSSやJQueryでも可能ですか？この設定はどうしていますか？

ありがとうございました。

JSFiddle：JSFiddleから https://jsfiddle.net/7fnzxoq4/

サンプルコード：

HTML

<div id="content" > 
<div class="outerFixedColumn"> 
    <table class="fixedColumn"> 
      <thead> 
      <tr> 
       <th colspan="5">JAPAN</th> 
      </tr> 
      <tr> 
       <th colspan="3">Customer</th> 
       <th>Type</th> 
       <th>Sector</th> 
      </tr> 
      </thead> 
      <tbody> 
      ...data...  
     </tbody> 
    </table> 
<div class="innerFixedColumn"> 
    <table class="fixedColumn scrollTable"> 
      <thead> 
      <tr> 
       <th class="centered" colspan="2">Producer 1</th> 
       <th class="centered" colspan="2">Producer</th> 
       <th class="centered" colspan="2">Producer</th> 
       <th class="centered" colspan="2">Producer</th> 
       <th class="centered" colspan="2">Producer</th> 
      </tr> 
      <tr> 
        <th class="centered">PR</th> 
        <th class="centered">Q</th> 
        <th class="centered">PR</th> 
        <th class="centered">Q</th> 
        <th class="centered">PR</th> 
        <th class="centered">Q</th> 
        <th class="centered">PR</th> 
        <th class="centered">Q</th> 
        <th class="centered">PR</th> 
        <th class="centered">Q</th> 
      </tr> 
      </thead> 
      <tbody> 
      ...data... 
     </tbody> 
     </table> 
</div> 
</div> 
</div> 

CSS

#content .outerFixedColumn { 
    padding: 0; 
    margin: 0; 
} 

#content .innerFixedColumn { 
    overflow: auto; 
    border-left: 1px solid #999999; 
    border-right: 1px solid #999999; 
    border-bottom: 1px solid #999999; 
} 

#content table.fixedColumn { 
    margin: 0 5px 0 0; 
    font-size: 0.8em; 
    border-left: 1px solid #999999; 
    border-right: 1px solid #999999; 
    float: left; 
    border-collapse: collapse; 
} 

#content table.fixedColumn.scrollTable { 
    border-left: none; 
    border-right: none; 
} 

#content table.fixedColumn th { 
    white-space: nowrap; 
    text-align: left; 
    vertical-align: top; 
    padding: 6px 7px 7px 7px; 
    border-top: 1px solid #999999; 
    border-bottom: 1px solid #999999; 
    border-left: 1px solid #dddddd; 
    background: #eeeeee; 
    height: 14px; 
    line-height: 14px; 
} 

#content table.fixedColumn th.row { 
    height: 28px; 
    line-height: 28px; 
} 

#content table.fixedColumn td { 
    text-align: left; 
    vertical-align: top; 
    padding: 6px 7px 7px 7px; 
    border-top: 1px solid #999999; 
    border-bottom: 1px solid #999999; 
    border-left: 1px solid #dddddd; 
    white-space: nowrap; 
    height: 28px; 
    line-height: 28px; 
} 

#content table.fixedColumn th:first-child, 
#content table.fixedColumn td:first-child { 
    border-left: none; 
    padding-left: 8px; 
} 

#content table.fixedColumn.scrollTable.costs td { 
    text-align: right; 
    padding-right: 0px; 
} 

Answer 1

これにはさまざまな方法があります。速くて汚いルートは、ウィンドウのスクロールオフセットに基づいて、thead要素の相対位置に調整するためにjQueryを使うことです。このようにすることの問題は、$(window).scrollで関数を実行しなければならないことです。これは面倒です。ここで

は、あなたが（あなたはthead { position:relative; }があなたのCSSに存在することを確認する必要があります覚えておいてください）そのために必要があるだろうというjQueryの：

$(window).scroll(function(){ 
    $('thead').each(function(){ 
    $(this).css({'top':$(window).scrollTop()}); 
    }); 
}); 

それが原因追加の計算に少しラグですそのようなiframeで動作するように動作していますが、ここにはthe fiddleがあります。