정보실

웹학교

정보실

css 고정 테이블 헤더

본문

몇 달 전에 필자는 CSS 위치를 사용하는 고정 테이블 헤더의 예를 작성했습니다. 

부분적으로 가능하다는 것을 보여주기 위해 끈적 끈적하지만 클라이언트가 이중 <table> 접근 방식 또는 all- <div 사용을 설득하려고 시도했습니다. > 접근. 

그런 다음 CSS 트릭이 게시물을 작성한 다음 잊어 버린 다음 일이 발생했습니다. 이제 여기 있습니다.


https://adrianroselli.com/2020/01/fixed-table-headers.html 


표준 HTML 테이블은 그렇게 복잡하지 않습니다. 

그러나 개발자가 HTML에 익숙하지 않거나 타사 라이브러리에서 HTML을 생성하게 되면 일반적으로 액세스 할 수 없는 오버 엔지니어링 혼란입니다. 

개발자가 도달하는 가장 일반적인 이유 중 하나는 고정 헤더를 원하기 때문입니다. 간단한 테이블의 경우 대부분 불필요합니다.


이 게시물의 모든 내용은 왼쪽에서 오른쪽, 위에서 아래로 읽는 순서와 언어를 가정합니다.


The CSS 


고정 열 헤더의 경우 :


th { position: -webkit-sticky; position: sticky; top: 0; z-index: 2; } 


고정 행 헤더의 경우 :


th[scope=row] { position: -webkit-sticky; position: sticky; left: 0; z-index: 1; } 


하나의 사이트 (페이지, 화면 등)에 둘 다 포함하려는 경우보다 구체적인 선택기와의 충돌을 피할 수 있습니다. 결국, 행 머리글은 scope = "row"없이는 제대로 작동하지 않지만 열 머리글은 범위 없이 잘 작동합니다 (그리고 일반적으로 내 경험에는 없습니다).


th:not([scope=row]) { position: -webkit-sticky; position: sticky; top: 0; z-index: 2; } 


다른 z- 색인 값은 열 머리글이 행 머리글 앞에 있도록 합니다. 그렇지 않으면 보이는 행 헤더가 열 헤더에 대한 것처럼 보이고 이상한 것입니다. 그 동안 머리글 셀에 배경색이 있는지 확인하십시오. 그렇지 않으면 텍스트가 계층화 됩니다.


행 머리글의 경우 오른쪽에 테두리를 추가하여 인접한 셀의 클리핑을 조금 덜 이상하게 만들 수 있습니다. 문제는 여기서 CSS 테두리가 작동하지 않는다는 것입니다. 그들은 그냥 스크롤 합니다. 배경 그라디언트가 있는 작은 속임수는 그 문제를 해결할 수 있습니다.


th[scope=row] { background: linear-gradient(90deg, transparent 0%, transparent calc(100% - .05em), #d6d6d6 calc(100% - .05em), #d6d6d6 100%); } 


 


Codepen에서 이 예제를 보십시오.


https://codepen.io/aardrian/full/vMpayz 


Responsive Uses 


분명히 이 방법은 반응 형 테이블에 적합합니다. 스크롤 컨테이너를 사용하는 방법을 보여주었습니다. 

그것은 우리가 확실히 래퍼 컨테이너를 가지고 있음을 의미하며 또한 페이지와 독립적으로 스크롤 될 가능성이 있음을 의미합니다.


내 선택기는 의도적으로 복잡합니다. 

컨테이너에 탭 역할 (키보드 사용자 용)과 지역 역할 및 액세스 가능한 이름 (스크린 리더 사용자 용)이 없는 경우 오버플로 스타일이 적용되지 않도록 하고 싶습니다. 

자신의 견고성과 대상 브라우저 지원에 맞게 자유롭게 조정하십시오.


div[tabindex="0"][aria-labelledby][role="region"] { overflow: auto; } 


스크롤바는 모바일 장치 (및 일부 데스크탑 브라우저 구성)에서 기본적으로 숨겨져 있으므로 사용자가 스크롤 해야 하는 시각적 여유가 사라지는 경우가 많습니다. 

Lea Verou의 2012 post post CSS CSS 스크롤 그림자를 배경 첨부 파일로 사용 : local은 세로 스크롤 콘텐츠에 약간의 그림자를 추가하고 Chen Hui Jing은 가로 스크롤에 이를 적용했습니다. 

px 대신 em을 사용하도록 조정하여 확장성이 향상되었습니다.


div[tabindex="0"][aria-labelledby][role="region"].rowheaders { background: linear-gradient(to right, transparent 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)) 0 100%; background-repeat: no-repeat; background-color: #fff; background-size: 4em 100%, 4em 100%, 1.4em 100%, 1.4em 100%; background-position: 0 0, 100%, 0 0, 100%; background-attachment: local, local, scroll, scroll; } div[tabindex="0"][aria-labelledby][role="region"].colheaders { background: linear-gradient(white 30%, rgba(255,255,255,0)), linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; background-repeat: no-repeat; background-color: #fff; background-size: 100% 4em, 100% 4em, 100% 1.4em, 100% 1.4em; background-attachment: local, local, scroll, scroll; 


좁거나 짧은 화면에서 큰 테이블은 두 방향으로 스크롤 될 수 있습니다. WCAG 2.1 SC 1.4.10 : 리플 로우 (레벨 AA)를 위반할 수 있지만 해당 시나리오를 무시할 이유는 없습니다. 한 가지 방법은 왼쪽에서 오른쪽으로 스크롤 할 때 행 머리글의 열 머리글이 사라지지 않도록 하는 것입니다.


가장 쉬운 방법은 행 머리글이 아닌 첫 번째 머리글 셀을 잡고 z- 색인을 늘리는 것입니다. 위에서 설명한 것처럼 테두리 효과도 제공합니다.


th:not([scope=row]):first-child { left: 0; z-index: 3; background: linear-gradient(90deg, #666 0%, #666 calc(100% - .05em), #ccc calc(100% - .05em), #ccc 100%); } 


 


Codepen에서 이 반응 형 예제를 보십시오.


https://codepen.io/aardrian/full/VwYyVJY 


호환성 메모 


Firefox만이 <thead>에서 position : sticky를 지원하므로 최대 호환성을 위해 <th>에 의존해야 합니다 (어쨌든 <thead>를 사용하는 수동 코더는 거의 없습니다). 이를 자세히 알려주는 Chromium 버그가 있습니다. 훨씬 더 많은 컨텍스트를 제공하지만 결코 Wayback으로 만들지 않는 레거시 Edge 버그가 있었습니다.


<caption> 요소는 끈적 거리는 것을 명예롭게 거부합니다. 이것은 왼쪽 스크롤에서 가장 잘 유지 될 때 사라지는 것을 의미합니다.

macOS 및 iOS의 Safari에는 -webkit-sticky가 필요합니다.


macOS 및 iOS의 Safari는 <caption>에서 공간을 회수하지 않습니다. 세로로 스크롤 할 때 데이터 셀이 열 머리글 행 위에 나타나는 간격이 생깁니다. <caption>은 액세스 가능한 테이블의 일부이며 래핑 <div>의 액세스 가능한 이름도 제공하므로 제거 할 수 없습니다. 대신 <caption>에서 시각적으로 숨겨진 클래스를 사용하는 것이 좋습니다 (아래에서 사용 가능).


Internet Explorer 11 이상에서는 작동하지 않습니다. 나는 Stickybits polyfill과 Stickyfill polyfill을 실험했지만 바람에 빠지는 여러 가지 이유로 테이블과 잘 작동하지 않았습니다.


고정 행이 컨테이너 / 뷰포트 높이보다 충분히 짧지 않거나 고정 컬럼이 컨테이너 / 뷰포트 너비보다 충분히 좁지 않으면 이는 끔찍할 것입니다. 따라서 작은 장치에서는 장치, 줌 크기 및 줌 크기를 주의하여 테스트하십시오.


Can I Use에서 스티커 지원 및 최신 CSS 위치 초안의 언어에 대해 자세히 알아보십시오.


visually-hidden Class 


/* Proven method to visually hide something but */ /* still make it available to assistive technology */ .visually-hidden { position: absolute; top: auto; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE 6/7 */ clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; white-space: nowrap; } 



페이지 정보

조회 151회 ]  작성일20-01-24 14:09

웹학교