2

縦方向と横方向のデータを含む巨大なテーブルがあります...

このように：jsfiddle

左端の列と一番上の行を固定して、両方向にスクロールしているときに、これらの 2 つ (列と行) を保持できるようにしたいと考えています。ただし、コンテンツのみを移動します。

JS/CSSでこれを達成する方法は?

双方向スクロールがあるため、純粋なcssソリューションではうまくいかないと思います。

someclass { position: fixed }
4

1 に答える 1

3

あなたの質問に答えるために必要なコード全体は、ここに含めるには大きすぎます。代わりに、答えを保持しているJSBinにリンクし、スタイリングと JavaScript だけを含めます。

注意事項は次のとおりです。

  • データを表示するために div の代わりにテーブルを使用することに固執している場合は、特にセル内のデータの幅と高さが異なる場合、私が提供した回答をフォーマットするのに苦労することになります。
    • これを実現するには、各行と列のヘッダーを調べてから、それぞれの幅と高さを、それらの幅/高さとテーブル内の行の幅/高さの間の最大値に設定する必要があります。テーブルの残りのセルに対して幅と高さが自動的に設定されない理由は、position: fixedスタイル属性を設定すると、基本的にテーブルからそれらを分割するためです。
      • したがって、権限がある場合は、代わりに div を使用し、行ヘッダーを個別に分割して、列ヘッダーの現在の動作をエミュレートするdivことposition: fixedを検討してください。
      • もう 1 つのボーナスは、スクロールするたびに行ヘッダーを調整するために jQuery がすべての行を反復処理しないため、パフォーマンスが向上することです。
  • jQuery UIを使用する必要があります。

HTML:

<!-- Notice I removed background and border color from table tag -->
<table border="0" width="100%" cellpadding="3" cellspacing="1">
  <tr>
    <td>Dead Cell</td><!-- this cell is not shown -->
    ...

CSS:

/* Make white space above table since we broke the column headers out of the table */
table {
  margin-top: 51px;
  position: relative;
}
table td {
  border: 1px solid #FFCC00;
  height: 44px;
  background-color: #FFFFCC;
}
/* styling for column headers */
table tr:first-child {
  position: fixed;
  top: 0;
  left: 57px;
  z-index: 100;
}
/* remove first cell in top left position */
table tr:first-child td:first-child {
  display: none;
}
table tr:first-child td,
table tr {
  position: relative;
}
table tr:first-child td {
  background: orange;
}
table tr td:first-child {
  background: orange;
  position: fixed;
  width: 39px
}
/* Make white space to the left of table since we broke the row headers out of the table */
table tr:nth-child(n+2) td:nth-child(2) {
  margin-left: 48px;
  display: block;
}

JS:

$(function(){ // When document is loaded and ready
  $(window).scroll(function() { // When we scroll in the window
    // Move column headers into place
    $('table tr:first-child td').css('left', - $(this).scrollLeft());
    // Move row headers into place
    $('table tr td:first-child').each(function() {
      $(this).position({ // jQuery UI overloaded function
        my: "left top",
        at: "left top",
        of: $(this).parent(),
        using: function(pos) {
          $(this).css('top', pos.top);
        }
      });
    });
  });
});

繰り返しますが、ここにJSBinへのリンクがあります。

于 2013-11-05T20:02:32.710 に答える