兩個單獨的固定列標題與水平滾動與CSS或JQuery

Question

我試圖讓同一頁上有兩個單獨的表有固定的標題，或者有垂直滾動內容或滾動時「粘」到頁面的頂部下。

我遇到的問題是其中一個表具有水平滾動內容。

下面是它的樣子。我想要修復的是左側的「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

有很多不同的方法可以做到這一點。快速和骯髒的路線是使用jQuery根據窗口的滾動偏移量來調整您的thead元素的相對位置。這樣做的問題是您必須運行$(window).scroll上的功能，這可能很煩人。

這裏，你會需要它（請記住，你必須確保thead { position:relative; }存在於你的CSS）jQuery的：

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

這是一個有點laggy由於額外的計算運行它在iframe中工作，但這裏是the fiddle。