最初の2つの列をテーブルに固定する

Question

最初の2つの列を動的幅のn個の列を持つテーブルに固定する必要があります。

私はCSSの下

td:nth-child(1),td:nth-child(2){ 
position:sticky; 
left:0px; 
} 

をしようとしたし、私は、最初の列の幅を計算することで、JSの2列目の左の位置を設定していた

var width=$("table tr > td:nth-child(1)").outerWidth(); $("table.matrix_class tr > td:nth-child(2)").css('left',width);

今、私がする必要がjsではなく、CSSですべてのものを行うにはどうすればよいですか？

Answer 1

このCSSを使用してスティッキーヘッダーを作成できます。

ライブ作業のデモ： https://jsfiddle.net/Akash951/q2sctfwz/ [デモ] [1]

<div class="zui-wrapper"> 
<div class="zui-scroller"> 
    <table class="zui-table"> 
     <thead> 
      <tr> 
       <th class="zui-sticky-col">Name</th> 
       <th class="zui-sticky-col2">Number</th> 
       <th>Position</th> 
       <th>Height</th> 
       <th>Born</th> 
       <th>Salary</th> 
       <th>Prior to NBA/Country</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td class="zui-sticky-col">DeMarcus Cousins</td> 
       <td class="zui-sticky-col2">15</td> 
       <td>C</td> 
       <td>6'11"</td> 
       <td>08-13-1990</td> 
       <td>$4,917,000</td> 
       <td>Kentucky/USA</td> 
      </tr> 
      <tr> 
       <td class="zui-sticky-col">Isaiah Thomas</td> 
       <td class="zui-sticky-col2">22</td> 
       <td>PG</td> 
       <td>5'9"</td> 
       <td>02-07-1989</td> 
       <td>$473,604</td> 
       <td>Washington/USA</td> 
      </tr> 
      <tr> 
       <td class="zui-sticky-col">Ben McLemore</td> 
       <td class="zui-sticky-col2">16</td> 
       <td>SG</td> 
       <td>6'5"</td> 
       <td>02-11-1993</td> 
       <td>$2,895,960</td> 
       <td>Kansas/USA</td> 
      </tr> 
      <tr> 
       <td class="zui-sticky-col">Marcus Thornton</td> 
       <td class="zui-sticky-col2">23</td> 
       <td>SG</td> 
       <td>6'4"</td> 
       <td>05-05-1987</td> 
       <td>$7,000,000</td> 
       <td>Louisiana State/USA</td> 
      </tr> 
      <tr> 
       <td class="zui-sticky-col">Jason Thompson</td> 
       <td class="zui-sticky-col2">34</td> 
       <td>PF</td> 
       <td>6'11"</td> 
       <td>06-21-1986</td> 
       <td>$3,001,000</td> 
       <td>Rider/USA</td> 
      </tr> 
     </tbody> 
    </table> 
</div>