개요
Show 가장 기본적인 테이블 마크업을 사용해서
변형상황별 테이블 색상, 테이블 행 또는 개별 셀을 사용하세요.
보조 기술에 의미 전달하기색상을 사용하여 의미를 추가하는 것은 시각적 표시만 제공되며 스크린 리더와 같은 보조 기술 사용자에게는 전달되지 않습니다. 색상으로 표시된 정보가 콘텐츠 자체 (예: 보이는 텍스트)에서 명확하거나 테이블 강조스트라이프 행
이러한 클래스는 테이블 변형에도 추가할 수 있습니다:
호버할 수 있는 행
These hoverable rows can also be combined with the striped variant:
활성화 테이블
변형과 강조 테이블은 어떻게 작동하나요?악센트가 있는 테이블 (스트라이프 행, 호버할 수 있는 행, 활성화 테이블)을 위해서 이러한 효과가 모든 테이블 변형에서 작동하도록 몇 가지 기술을 사용했습니다:
내용을 보면 다음과 같습니다:
테이블 테두리테두리가 있는 테이블셀의 모든 면에 테두리가 있는 테이블을 만들려면
테두리 색상 유틸리티는 색상을 변경하는 데에 사용할 수 있습니다:
테두리가 없는 테이블테두리가 없는 테이블을 만들려면
얇은 테이블
수직 정렬
중첩테두리 스타일, 활성화 스타일 및 테이블 변형은 중첩된 테이블에 상속되지 않습니다.
중첩 작동 원리아무 스타일이 중첩 테이블로 유출되는 것을 방지하기 위해 CSS에서 자식 결합자 ( 테이블의 직계 자식으로 구조테이블 머리글테이블 및 어두운 테이블과
유사하게, 수정자 클래스
테이블 하단
테이블 이름
List of users
List of users
반응형 테이블반응형 테이블을 사용하면 테이블을 쉽게 가로로 스크롤할 수 있습니다. 수직 자르기/잘림반응형 테이블은 항상 반응형모든 중단점에서 테이블 수평 스크롤에
중단점으로 구분특정 중단점까지 반응형 테이블을 생성하려면 필요에 따라 이러한 테이블은 반응형 스타일이 특정 뷰포트 너비에 적용될 때까지 깨져보일 수 있습니다.
Sass변수
루프
사용자 지정-요인 변수 ( |