.table - (padding과 회색 가로선 추가)
.table-striped - (<tbody>내의 가로줄 한 줄 너머마다 배경색 넣기)
.table-bordered - (테이블과 셀에 경계선 넣기)
.table-hover - (<tbody>안 행에 hover 효과 주기)
.table-condensed - (셀 padding 반으로 줄여 좀 더 응집되게 만들기)
.active - 특정 줄이나 셀에 옅은 회색 배경 적용
.success - (성공/긍정 동작 표시) - 옅은 청록색 배경색
.info - (중립적인 변화나 동작 표시) - 약간 옅은 청록색 배경색
.warning - (주의 요하는 경고 표시) - 아주 옅은 보라색
.danger - (위험/잠재적으로 부정적 동작 표시) - 약간 옅은 보라색
.table-responsive (반응형 테이블) - 가로 길이만 축소
Table Basic (기본)
<table class="table ">
...
</table>
약간의 padding과 가로선 존재.
Table strip (얼룩말 줄무늬) IE9 이상
<table class="table table-striped ">
...
</table>
※ <tbody> 안 홀수 행에 옅은 회색 배경색 추가. (얼룩말줄무늬)
※ :nth-child 선택자 사용하므로, IE9 이상부터 사용 가능.
Table border (테두리)
<table class="table table-bordered ">
...
</table>
테이블 모서리와 셀에 테두리선 추가.
Table hover (허버)
<table class="table table-hover ">
...
</table>
<tbody> 안 행에 옅은 회색배경색 hover 추가.
Table condense (응집테이블 = 좁은폭테이블)
<table class="table table-condensed ">
...
</table>
Table Contextual Color (맥락배경색 )
.active
연회색 (호버 색상)
.success
연녹색 (성공・긍정적 액션)
.info
연청록 (중립적 정보변화나 조치)
.warning
아이보리 (주의 필요한 경고)
.danger
연보라 (위험・부정적 액션)
<!-- 행 (row: <tr>) -->
<tr class="active ">...</tr>
<tr class="success ">...</tr>
<tr class="warning ">...</tr>
<tr class="danger ">...</tr>
<tr class="info ">...</tr>
<!-- 셀 (cell : <th> , <td>) -->
<tr>
<td class="active ">...</td>
<td class="success ">...</td>
<td class="warning ">...</td>
<td class="danger ">...</td>
<td class="info ">...</td>
</tr>
※ 스크린리더 같은 기기엔 해당 색깔 정보가 제공 안 됨. (색깔 텍스트 별도 표시 필요)
Table Responsive (반응형 테이블)
<div class="table-responsive">
<table class="table">
...
</table>
</div>
※ 주의1
.table-responsive 클래스는 overflow-y: hidden; 속성 사용하는데,
드롭다운메뉴처럼 아래로 길게 나오는 요소 자를 수 있으니 주의. ㅡㅡ;
※ 주의2
반응형테이블 width 관여 Firefox 필드셋 스타일 해결핵. 자세히보기
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
※ 방법: 테이블 감싸는 div 요소에 .table-responsive 클래스 추가.
※ 효과: 768 픽셀 미만 기기에서 하단에 가로 스크롤바 생성됨.
최신댓글