[CSS] Table thead sticky & Scrollbar Custom

안녕하세요🙏 개발자 재민콩입니다.

 

오늘은 thead가 고정된 table과, scrollbar를 custom 하는 방법을 알아보겠습니다!

 

1. Sticky

// 테이블을 감싸는 div영역에 max-height 지정
.table-wrap {
  max-height: 332px;
}
.table-wrap table thead {
  // ie에서는 지원하지 않습니다.
  position: sticky;
  // 이부분을 추가해줘야 적용됩니다.
  top: 0;
}

 

2. Scrollbar Custom

// 스크롤 Custom은 지원하지 않는 브라우저가 많음(적용 안될시 기본 스크롤바가 보임)
.table-wrap {
  // ie에서 지원하지 않음
  overflow: overlay;
  
  &::-webkit-scrollbar {
    width: 24px;
    height: 24px;
  }

  &::-webkit-scrollbar-track {
    margin: 0;
    margin-top: 56px;
    border-radius: 20px;
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #d9dfeb;
    background-clip: padding-box;
    border-radius: 20px;
    border: 8px solid transparent;
  }
}

 

3. 적용화면

 

4. Reference

• W3Schools
• Can I use