목차
Table Basic (기본 테이블) Table strip (테이블 얼룩말 줄무늬) IE9 이상 Table border (테이블 테두리) Table hover (테이블 허버) Table Dark (검정 테이블) Table Dark + Strip (검정 얼룩말 줄무늬 테이블) Table Dark + Hover (검정 테이블 허버) Table borderless (테두리 없는 테이블) TABLE, TR, TD 태그용 - 의미별 배경색 클래스 Table Thead (테이블 헤드 배경색) Table Small Size (좁은폭 테이블) Table Responsive (반응형 테이블)
※ BS4와 거의 유사. (단, 테이블 헤드 배경색 클래스 바뀜. XXL 반응형 도입.)
Table Basic (기본 테이블)
(.table) 클래스 사용.
<table class="table ">
...
</table>
※ 약간의 padding과 가로선 존재.
Table strip (테이블 얼룩말 줄무늬) IE9 이상
(.table-striped) 클래스 추가.
<table class="table table-striped ">
...
</table>
※ <tbody> 안 홀수 행에 옅은 회색 배경색 추가. (얼룩말줄무늬)
※ :nth-child 선택자 사용하므로, IE9 이상부터 사용 가능.
Table border (테이블 테두리)
(.table-bordered) 클래스 추가.
<table class="table table-bordered ">
...
</table>
※ 테이블 모서리와 셀에 테두리선 추가.
Table hover (테이블 허버)
(.table-hover) 클래스 추가.
<table class="table table-hover ">
...
</table>
<tbody> 안 행에 옅은 회색배경색 hover 추가.
Table Dark (검정 테이블)
(.table-dark) 클래스 추가.
<table class="table table-dark ">
...
</table>
Table Dark + Strip (검정 얼룩말 줄무늬 테이블)
(.table-dark / .table-striped) 클래스 둘 다 추가.
<table class="table table-dark table-striped ">
...
</table>
Table Dark + Hover (검정 테이블 허버)
(.table-dark / .table-hover) 클래스 둘 다 추가.
<table class="table table-dark table-hover ">
...
</table>
Table borderless (테두리 없는 테이블)
(.table-borderless) 클래스 추가.
<table class="table table-borderless ">
...
</table>
TABLE, TR, TD 태그용 - 의미별 배경색 클래스
<table class="table">
<thead>
<tr><th>테이블 색깔</th></tr>
</thead>
<tbody>
<tr><td>기본색 (흰색)</td></tr>
<tr class="table-primary "><td>하늘색 (중요)</td></tr>
<tr class="table-success "><td>녹색 (성공・긍정)</td></tr>
<tr class="table-danger "><td>빨간색 (위험・잠재적으로 부정적)</td></tr>
<tr class="table-info "><td>파란색 (중립적정보)</td></tr>
<tr class="table-warning "><td>주황색 (주의・경고)</td></tr>
<tr class="table-active "><td>회색 (테이블 행 또는 테이블 셀에 호버 색상 적용.)</td></tr>
<tr class="table-secondary "><td>회색 (덜 중요)</td></tr>
<tr class="table-light "><td>연회색</td></tr>
<tr class="table-dark text-dark"><td>진회색</td></tr>
</tbody>
</table>
예제보기
Table Thead (테이블 헤드 배경색)
(.table-dark) 클래스: 진남색 (BS5 +) cf. BS4 경우, .thead-dark
(.table-light) 클래스: 회색 (BS5 +) cf. BS4 경우, .thead-light
<table class="table">
<thead class="table-dark ">
<tr> <th>thead-dark</th></tr>
</thead>
<tbody>
<tr><td>진남색</td></tr></tr>
</tbody>
</table>
<table class="table">
<thead class="table-light ">
<tr><th>thead-light</th></tr>
</thead>
<tbody>
<tr><td>연회색</td></tr></tr>
</tbody>
</table>
결과보기
Table Small Size (좁은폭 테이블)
(.table-sm) 클래스 추가.
table-sm ">
...
</table>
※ 기본 테이블 셀 패딩의 절반인 테이블.
cf. BS3: table-condensed 클래스 사용.
Table Responsive (반응형 테이블)
※ 테이블 감싸는 div 요소에 적용.
.table-responsive
반응형 테이블. 모든 기기에서 자동 감지해 하단 가로 스크롤바 생성.
.table-responsive-sm
576px 미만 기기에서 하단 가로 스크롤바 생성
.table-responsive-md
768px 미만 기기에서 하단 가로 스크롤바 생성
.table-responsive-lg
992px 미만 기기에서 하단 가로 스크롤바 생성
.table-responsive-xl
1200px 미만 기기에서 하단 가로 스크롤바 생성
.table-responsive-xxl
1400px 미만 기기에서 하단 가로 스크롤바 생성 (BS5 +)
[예제]
<div class="table-responsive">
<table class="table">
...
</table>
</div>
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
예제보기
※ BS3 경우, .table-responsive (768px 미만 스크롤생성) 클래스만 지원.
