使用Javascript - 修復表欄滾動

Question

當我這裏有一個的jsfiddle - https://jsfiddle.net/4eohzxwn/1/

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

     }); 
    }); 

我需要左靜態列被固定在TABEL滾動的其餘部分。

我認爲jquery/javascript是唯一的選擇。

是否可以將紅色靜態元素保留在位置並滾動表格的其餘部分。

我還需要不斷的行高，當它滾動因此它不只是去一行

Answer 1

你看這個問題？ HTML table with horizontal scrolling (first column fixed)

你在你的片段，並在回答使用jQuery有到this plugin的鏈接似乎解決您的問題，但你可能可以實現你想要的只有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

試試這個代碼中使用，而不是

translateposition

$("#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>