スクロールするときにヘッダー要素を常に上に維持しますか？

Question

私はこのトピックに関する多数の記事を読んでいくつかの実装を試しましたが、私はそれを正しいものにすることはできません。私の行が行くので、

<table> 
    <tr> 
    <th>Product:</th> 
    <th>Product 1</th> 
    <th>Product 2</th> 
    <th>Product 3</th> 
    </tr> 
    <tr> 
    <td>Features</td> 
    <td>Product 1 features</td> 
    <td>Product 2 features</td> 
    <td>Product 3 features</td> 
    </tr> 
    and so the list goes on... 
</table> 

私が欲しいもの、私は下にスクロールするときには、一番上の行で、常にアクティブなウィンドウの上部にあることをヘッダ行のためにある：私は、製品を比較し、単純なHTMLテーブルには、持っていますかなり遠い。私はタグの製品名を常に見えるようにして、ユーザーが一番上の行のさまざまな製品にコンテンツを常に関連付けることができるようにしたいと考えています。

ありがとうございます！

Answer 1

単純な手法は、実際のデータとは別のtableにヘッダー行を入れることです。 このヘッダーテーブルの位置はfixedに設定されており、結果を保持する下の表にはmargin-topにヘッダーテーブルのheightが設定されています。

これは、ヘッダーがどこにあるか、テーブルスクロールの効果を作り出します。あなたはまた、jQueryのプラグインで固定ヘッダを作成することができますhttp://jsfiddle.net/zKDR4/2/

：

ここで基本的な例。この1つを見てみましょうhttp://fixedheadertable.com/本当に簡単に実装する。

編集アンダースが述べたように

あなたが私の提案ルートを下る場合、あなたはthとtd要素の幅を設定する必要があります。それ以外の場合は、別々の表であるため一致しません。

Answer 2

divを作成して位置を固定することでこれを行うことができます。または、それはまた、インラインCSS

<table style="position:fixed;"> 
    <tr> 
    <th>Product:</th> 
    <th>Product 1</th> 
    <th>Product 2</th> 
     <th>Product 3</th> 
    </tr> 
    <tr> 
    <td>Features</td> 
    <td>Product 1 features</td> 
    <td>Product 2 features</td> 
    <td>Product 3 features</td> 
    </tr> 
    </table> 

Answer 3

を追加することによって行わことができます私はあなたがview as a demoできJSFiddleを、使用した例を作成しました。

唯一の欠点は、position: fixedを使用するときにヘッダーの幅を失うときと同じように列サイズを指定する必要があることです。

これは例のCSSであり、HTMLは提供したものと同じです。

Answer 4

行ヘッダー（時間）と列ヘッダー（日）の計画に問題がありました。 私は両方を目にしたいと思っていました。 アプリケーションはIFrame内のコンテンツを表示するので、IFrameの外に水平DIVと垂直DIVを作成しました。スタイルは "overflow：hidden"です。 次に、スクロールをIFrameの「onscroll」イベントと同期させました。ここで

は、スクロールして、ヘッダーを同期するために私のコードです：私は、水平DIVと垂直DIVの高さの幅を「さらにonResize」で設定する必要がありましたので、

window.onscroll = function() { 

     try { 
      // - Scroll days header (on the top) horizontally 
      var offsetX = (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft; // Source: http://stackoverflow.com/questions/2717252/document-body-scrolltop-is-always-0-in-ie-even-when-scrolling 
      var header1Div = window.parent.document.getElementById("EntetesColonnes"); 
      header1Div.scrollLeft = offsetX; 

      // - Scroll hours header (on the left) vertically 
      var offsetY = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; // Source: http://stackoverflow.com/questions/2717252/document-body-scrolltop-is-always-0-in-ie-even-when-scrolling 
      var header2Div = window.parent.document.getElementById("HeaderHoursLeft"); 
      header2Div.scrollTop = offsetY; 
     } 
     catch (ex) { 
      alert("FrmPlanningChirurgien/window.onscroll: " + ex.message); 
     } 
    } 

私のソリューションは、それほど単純ではありません。 これは、onResizeが1秒間に多くの時間を実行する可能性があるため、さらに複雑になります。このイベントは、スクロールが発生した場合でもIE8で発生します。 は、だから私は、あまりにも頻繁に再描画されるヘッダを防ぐためのsetTimeoutをやった：

var PREVIOUS_frameWidth = 0; 
var PREVIOUS_frameHeight = 0; 
var timerMakeHeaders = null; 

window.onresize = function() { 
    try { 

     var frameWidth = CROSS.getWindowWidth(); 
     var frameHeight = CROSS.getWindowHeight(); 

     if (frameWidth != PREVIOUS_frameWidth || frameHeight != PREVIOUS_frameHeight) { 

      // - *** Launch headers creation method 
      // - If there is another query to redraw, the Timer is stopped and recreated. 
      // - The headers are only redrawn when Timer fires. 
      if (timerMakeHeaders != null) { 
       window.clearTimeout(timerMakeHeaders); 
       timerMakeHeaders = null; 
      } 
      timerMakeHeaders = window.setTimeout(makeHeaders, 50); 

      // - *** Store new values 
      PREVIOUS_frameWidth = frameWidth; 
      PREVIOUS_frameHeight = frameHeight; 
     } 
    } catch (e) { alert("Erreur window.onresize/FrmPlanningChirurgien.aspx : " + e.message); } 
} 

そして最後にmakeHeaders()方法はdiv要素のサイズを変更する必要があります。

function makeHeaders() { 

    // (...) 

    var frame = window.parent.document.getElementById("CalendarFrame"); 
    var iframeRect = frame.getBoundingClientRect(); 
    headerDiv.style.width = iframeRect.right - iframeRect.left - 20; // The 20 pixels are here for the vertical scrollbar width 
    headerDiv.scrollLeft = frame.scrollLeft; 

    // (...) 


    var headerHourDiv = window.parent.document.getElementById("HeaderHoursLeft"); 
    var newHeight = iframeRect.bottom - iframeRect.top - 20 - 7; // The VISIBLE width for the DIV must be equal to IFRAME Width minus the scroll width or height 
    headerHourDiv.style.height = newHeight; 
    headerHourDiv.scrollTop = frame.scrollTop;  


} 
catch (e) { 
    alert("makeHeaders: " + e.message); 
} } 

多分使用しないことも可能かもしれませんIFRAMEを使用し、3つのDIVSのみを使用します.1つは各ヘッダー用、もう1つはコンテンツ用です。しかし、メカニズムは同じでなければならないと思う：スクロール位置間の同期が必要だ。

敬具、