Javascriptを -

Question

をスクロールしたとき、私はここにjsfiddleを持つテーブルのサイドバーを固定する - https://jsfiddle.net/4eohzxwn/1/

$("div").scroll(function(){ 
     $('.static').css({ 
     "position": "absolute", "top": 0 

     }); 
    }); 

私はtabelのスクロールの残りの部分に固定される左スタティックカラムを必要としています。

私はJquery/javascriptが唯一の選択肢だと思います。

赤い静的要素を所定の位置に保持し、残りの表をスクロールすることは可能ですか？

私もそれはそれだけで1行

Answer 1

にならないように、あなたがこの質問を見てきましたスクロールしたときに、行の高さを維持する必要がありますか？ HTML table with horizontal scrolling (first column fixed)

あなたはあなたの問題を解決しているようだthis pluginへのリンクがありますあなたのスニペットで、答えではjQueryを使用しているが、あなたはおそらく、あなただけのCSSで欲しいものを達成することができます。

Answer 2

これはシンプルなhtmlとcssを使用して行うことができます。このためjqueryを書く必要はありません。下のコードを参考にしてください。

table{ 
 
    width: 600px; 
 
} 
 

 
.static{ 
 
    border: 1px solid red; 
 
    width: 100px; 
 
    word-wrap: break-word; 
 
    position:absolute; 
 
      width:5em; 
 
      left:0; 
 
      top:auto; 
 
} 
 

 
.scroll{ 
 
    border: 1px solid green; 
 
    width: 500px; 
 
} 
 

 
#outerdiv { 
 
      position: absolute; 
 
      top: 0; 
 
      left: 0; 
 
      right: 5em; 
 
     } 
 
     #innerdiv { 
 
      width: 100%; 
 
      overflow-x:scroll; 
 
      margin-left: 5em; 
 
      overflow-y:visible; 
 
      padding-bottom:1px; 
 
     } 
 
     .headcol { 
 
      position:absolute; 
 
      width:5em; 
 
      left:0; 
 
      top:auto; 
 
      border-right: 0px none black; 
 
      border-top-width:3px; 
 
      /*only relevant for first row*/ 
 
      margin-top:-3px; 
 
      /*compensate for top border*/ 
 
     }

<div id="outerdiv"> 
 
    <div id="innerdiv"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td class="static">Staticdfxc</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="static">Static</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="static">Static</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="static">Static</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
</div>

Answer 3

使用translateの代わりに、このコードを試してみてくださいposition

$("#wrap").scroll(function(){ 
 
    var translate = "translate("+this.scrollLeft + "px,0)"; 
 
    $('.static').css('transform',translate); 
 
});

table{ 
 
    width: 600px; 
 
} 
 

 
.static{ 
 
    border: 1px solid red; 
 
    width: 100px; 
 
    word-wrap: break-word; 
 
    background-color:#fff; 
 
} 
 

 
.scroll{ 
 
    border: 1px solid green; 
 
    width: 500px; 
 
} 
 

 
#wrap{ 
 
    border: 1px solid blue; 
 
    width: 400px; 
 
    overflow: scroll; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrap"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td class="static">Staticdfxcvzx 
 
     cvzxcvzxcv</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="static">Static</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="static">Static</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="static">Static</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 4

$("#wrap").scroll(function(){ 
 
    var translate = "translate("+this.scrollLeft + "px,0)"; 
 
    $('.static').css('transform',translate); 
 
});

table{ 
 
    width: 600px; 
 
} 
 

 
.static{ 
 
    border: 1px solid red; 
 
    width: 100px; 
 
    word-wrap: break-word; 
 
} 
 

 
.scroll{ 
 
    border: 1px solid green; 
 
    width: 500px; 
 
} 
 

 
#wrap{ 
 
    border: 1px solid blue; 
 
    width: 400px; 
 
    overflow: scroll; 
 
    position: relative; 
 
} 
 
.static 
 
{ 
 
background-color:#fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrap"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td class="static">Staticdfxcvzx 
 
     cvzxcvzxcv</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="static">Static</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="static">Static</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="static">Static</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     <td class="scroll">scroll</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>