Bootstrap을 사용한 테이블의 옵트인 스타일 지정에 대한 문서 및 예제(JavaScript 플러그인에서 널리 사용되는 경우).
이 페이지에서
개요
<table>캘린더 및 날짜 선택기와 같은 타사 위젯 전반에 걸쳐 요소 가 널리 사용되기 때문에 Bootstrap의 테이블은 옵트인입니다 . 기본 클래스 .table를 any <table>에 추가한 다음 선택적 수정자 클래스 또는 사용자 정의 스타일로 확장하십시오. 모든 테이블 스타일은 Bootstrap에서 상속되지 않습니다. 즉, 중첩된 테이블은 부모로부터 독립적으로 스타일을 지정할 수 있습니다.
가장 기본적인 테이블 마크업을 사용하여 .table부트스트랩에서 기반 테이블이 어떻게 보이는지 보여줍니다.
#
첫 번째
마지막
핸들
1
표시
장미유
@mdo
2
야곱
손튼
@지방
삼
래리 버드
@트위터
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
변형
상황별 클래스를 사용하여 테이블, 테이블 행 또는 개별 셀에 색상을 지정합니다.
수업
표제
표제
기본
셀
셀
주요한
셀
셀
중고등 학년
셀
셀
성공
셀
셀
위험
셀
셀
경고
셀
셀
정보
셀
셀
빛
셀
셀
어두운
셀
셀
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
보조 기술에 의미 전달
색상을 사용하여 의미를 추가하는 것은 시각적 표시만 제공하며 스크린 리더와 같은 보조 기술 사용자에게는 전달되지 않습니다. 색상으로 표시되는 정보가 콘텐츠 자체(예: 보이는 텍스트)에서 명확하거나 .visually-hidden클래스와 함께 숨겨진 추가 텍스트와 같은 대체 수단을 통해 포함되는지 확인합니다.
악센트 테이블
줄무늬 행
.table-striped. 안의 테이블 행에 얼룩말 줄무늬를 추가하는 데 사용 합니다 <tbody>.
--bs-table-bg사용자 정의 속성 을 사용하여 테이블 셀의 배경을 설정하는 것으로 시작합니다 . 그런 다음 모든 테이블 변형은 해당 사용자 정의 속성을 설정하여 테이블 셀에 색상을 지정합니다. 이렇게 하면 반투명 색상을 테이블 배경으로 사용하는 경우 문제가 발생하지 않습니다.
box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);그런 다음 지정된 위에 레이어를 사용하여 테이블 셀에 삽입 상자 그림자를 추가 합니다 background-color. 큰 퍼짐을 사용하고 흐림 효과가 없기 때문에 색상은 모노톤이 됩니다. --bs-table-accent-bg기본적으로 설정되어 있지 않으므로 기본 상자 그림자가 없습니다 .
.table-striped, 또는 클래스가 추가되면 .table-hover가 반투명 색상으로 설정되어 배경을 채색합니다..table-active--bs-table-accent-bg
각 테이블 변형 --bs-table-accent-bg에 대해 해당 색상에 따라 대비가 가장 높은 색상을 생성합니다. 예를 들어 의 강조 색상 .table-primary은 더 어둡고 강조 색상은 더 .table-dark밝습니다.
의 테이블 셀 <thead>은 항상 아래쪽에 수직으로 정렬됩니다. 의 테이블 셀은 기본적으로 상단에서 <tbody>정렬을 상속하고 상단에 정렬됩니다. 수직 정렬 클래스를 <table>사용하여 필요한 경우 다시 정렬합니다.
제목 1
제목 2
제목 3
제목 4
이 셀 vertical-align: middle;은 테이블에서 상속됩니다.
이 셀 vertical-align: middle;은 테이블에서 상속됩니다.
이 셀 vertical-align: middle;은 테이블에서 상속됩니다.
이것은 이전 셀에서 수직 정렬이 어떻게 작동하는지 보여주기 위해 꽤 많은 수직 공간을 차지하기 위한 일부 자리 표시자 텍스트입니다.
vertical-align: bottom;이 셀 은 테이블 행에서 상속 됩니다.
vertical-align: bottom;이 셀 은 테이블 행에서 상속 됩니다.
vertical-align: bottom;이 셀 은 테이블 행에서 상속 됩니다.
이것은 이전 셀에서 수직 정렬이 어떻게 작동하는지 보여주기 위해 꽤 많은 수직 공간을 차지하기 위한 일부 자리 표시자 텍스트입니다.
이 셀 vertical-align: middle;은 테이블에서 상속됩니다.
이 셀 vertical-align: middle;은 테이블에서 상속됩니다.
이 셀은 맨 위에 정렬됩니다.
이것은 이전 셀에서 수직 정렬이 어떻게 작동하는지 보여주기 위해 꽤 많은 수직 공간을 차지하기 위한 일부 자리 표시자 텍스트입니다.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
스타일이 중첩 테이블로 누출되는 것을 방지하기 위해 CSS> 에서 자식 결합자( ) 선택기를 사용합니다. , , 및 의 모든 tds 및 ths 를 대상으로 해야 하므로 선택기가 없으면 선택기가 꽤 길어 보입니다. 따라서 우리는 다소 이상해 보이는 선택기를 사용하여 의 모든 s와 s 를 대상 으로 하지만 잠재적인 중첩 테이블은 대상으로 삼지 않습니다.theadtbodytfoot.table > :not(caption) > * > *tdth.table
<tr>s를 테이블의 직계 자식으로 추가하면 기본적 <tr>으로 로 래핑 <tbody>되므로 선택기가 의도한 대로 작동합니다.
해부
테이블 헤드
테이블 및 다크 테이블과 유사하게 modifier 클래스 를 사용 .table-light하거나 s를 밝거나 어두운 회색으로 표시합니다..table-dark<thead>
A <caption>는 테이블의 제목과 같은 기능을 합니다. 스크린 리더를 사용하는 사용자가 테이블을 찾고 테이블의 내용을 이해하고 읽을지 여부를 결정할 수 있도록 도와줍니다.
사용자 목록
#
첫 번째
마지막
핸들
1
표시
장미유
@mdo
2
야곱
손튼
@지방
삼
래리 버드
@트위터
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
<caption>를 사용하여 테이블 상단에 놓을 수도 있습니다 .caption-top.
사용자 목록
#
첫 번째
마지막
핸들
1
표시
장미유
@mdo
2
야곱
손튼
@지방
삼
래리
새
@트위터
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
반응형 테이블
반응형 테이블을 사용하면 테이블을 수평으로 쉽게 스크롤할 수 있습니다. .table로 래핑 하여 모든 뷰포트에서 응답하는 테이블을 만듭니다 .table-responsive. 또는 를 사용하여 응답 테이블을 가질 최대 중단점을 선택합니다 .table-responsive{-sm|-md|-lg|-xl|-xxl}.
세로 자르기/잘림
반응형 테이블은 을 사용하여 overflow-y: hidden테이블의 맨 아래 또는 맨 위 가장자리를 벗어나는 모든 콘텐츠를 잘라냅니다. 특히 드롭다운 메뉴 및 기타 타사 위젯이 잘릴 수 있습니다.