「postion：スティッキーは、」設定した後に作業を停止します。上の「表示ブロック」をTR && TBODYすべての

Question

まず

だから... ...私は十分に明確であることを願っていますが、英語は私の母国語ではありませんpossibileミスのためにすみませんIこの問題を解決するには、最初の列と行が固定されたテーブルをスタイルする必要がありますスクリプトなしで。私はたくさんの検索をしてきましたが、実際にはここで多くの提案が見つかりました。最初の行と列の両方を修正するようになりました。

これを行うには同じテーブルを使用しましたが、私はさまざまなソリューションを別々に実装しました（2つの異なる.sassファイル）。

これは、テーブルのHTMLです：

<table> 
    <thead> 
     <tr> 
      <th></th> 
      <th id="1" class="dayColumn">Lunedì</th> 
      <th id="2" class="dayColumn">Martedì</th> 
      <th id="3" class="dayColumn">Mercoledì</th> 
      <th id="4" class="dayColumn">Giovedì</th> 
      <th id="5" class="dayColumn">Venerdì</th> 
      <th id="6" class="dayColumn">Sabato</th> 
      <th id="7" class="dayColumn">Domenica</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="hourNumber">**0**</td> 
      <td class="busy"></td> 
      <td class=""></td> 
      <td class=""></td> 
      <td class=""></td> 
      <td class=""></td> 
      <td class=""></td> 
      <td class="busy"></td> 
     </tr> 
     //the same thing over and over until 
     <tr> 
      <td class="hourNumber">**24**</td> 
      <td class=""></td> 
      <td class=""></td> 
      <td class=""></td> 
      <td class=""></td> 
      <td class=""></td> 
      <td class=""></td> 
      <td class=""></td> 
     </tr> 
     //don't mind the fact that I have 25 hours 
    </tbody> 
</table> 

うまく働いた私は、このSASSを使用した最初のROW、フリーズするには：

table 
    thead 
     tr 
      display: block 

     .dayColumn 
      height: 35px 
      min-width: 358px 

     .hourNumber 
      min-width: 30px 

    tbody 
     display: block 
     overflow: auto 
     height: 450px 

     td 
      min-width: 367px 

を私がした最初の列を固定するにはこのSASSを使用しました：

table 
    tbody 
     tr 
      text-align: center 

      td 
       min-width: 300px 

     .hourNumber 
      min-width: 30px 
      position: sticky 
      left: 0px 
      border: #4d4d4d 

     .dayColumn 
      min-width: 358px 

...正しく動作しました。

問題は次のとおりです。2つのソリューションを組み合わせると、最初の列のスティッキーソリューションが機能しなくなります。なぜこのようなことが起こるのか誰にでも理解できますか？

注：私も.hourNumberクラスに適用される固定ソリューションを使用しようとしたとTDへ：https://www.sassmeister.com/

注2：あなたはSASSに慣れていない場合はCSS3に変換するために、このサイトを使用します：nth-​​child（1）しかし、私はそれに問題があり、ragequitted：P

Answer 1

position: stickyは、技術的な理由でテーブルの特定の部分で正常に動作しないことがよく知られています。残念ながら、あなたはJSソリューションに頼らざるを得ません。