재민콩
맨땅에 코딩
재민콩
전체 방문자
오늘
어제
  • 분류 전체보기 (41)
    • Project (6)
      • 오늘은 무엇을 먹을까? (6)
    • Frontend (11)
      • HTML (1)
      • CSS (1)
      • Javascript (5)
      • Vue (1)
      • PWA (2)
      • Node.js (1)
    • Backend (4)
      • Django (3)
      • Docker (1)
    • Development Tools (3)
      • Visual Studio Code (2)
      • Eclipse (1)
    • Reference Site (3)
    • 정보처리기사 (12)
      • 필기 (11)
      • 실기 (1)
    • 코딩테스트 (0)
    • 기타 (1)

인기 글

최근 댓글

최근 글

hELLO · Designed By 정상우.
재민콩

맨땅에 코딩

[CSS] Table thead sticky & Scrollbar Custom
Frontend/CSS

[CSS] Table thead sticky & Scrollbar Custom

2022. 11. 10. 00:14
728x90

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

 

오늘은 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
728x90
저작자표시 (새창열림)
    재민콩
    재민콩
    안녕하세요🙌 개발자 재민콩 블로그입니다.

    티스토리툴바