"받은 위치 : 끈적는"설정 후 작동을 멈 춥니 다 :에 "디스플레이 블록"그럴 && TBODY 모든

Question

먼저

그래서 ... 내가 충분히 명확하게 희망하지만, 영어가 모국어 아닌 possibile 실수 실례 I 이 문제는 : 먼저 없이 스크립트를 고정 첫 번째 열 및 행 테이블을 스타일이 필요합니다. 나는 많은 것을 수색 했으니 여기에 많은 제안을 발견했다. 그래서 첫 번째 행과 열을 모두 고칠 수 있었다.

이렇게하려면 동일한 표를 사용했지만 두 가지 다른 .sass 파일에 대해 다양한 솔루션 을 별도로 구현했습니다.

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 

내가했습니다 첫 번째 열을 동결하기 :

<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를 사용했던 첫 번째 행을 동결하기 :

이

테이블의 HTML입니다 이 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 

... 올바르게 작동합니다.

문제는 : 두 가지 솔루션을 결합하면 첫 번째 열의 고정 솔루션이 작동을 멈 춥니 다. 아무도 왜 이러한 일이 발생하는지 이해하는 데 도움이 될 수 있습니까?

참고 : 나는 또한 .hourNumber 클래스에 적용되는 고정 솔루션을 사용하려고했습니다 그리고 TD를 : https://www.sassmeister.com/

NOTE2 : 당신이 SASS에 익숙하지 않은 경우 CSS3로 변환하기 위해이 사이트를 사용 : nth-child (1)하지만 문제가있어 ragequitted : P

Answer 1

position: sticky은 기술적 인 이유로 테이블의 특정 부분에서 제대로 작동하지 않는 것으로 잘 알려져 있습니다. 불행히도 JS 솔루션을 사용하거나 전혀 사용하지 않아야합니다.