부트스트랩 테이블 속성

부트스트랩에서 사용하는 테이블은 모두 반응형(responsive) 테이블이다.

따라서 브라우저의 길이에 맞춰 테이블의 크기 및 내용 부분 또한 가변적으로 변하게 된다.

테이블 태그 부분에 class="table" 을 적용해주면 width 가 100%인 테이블이 생성된다.

<table class="table">

각 행의 아래에 테두리(border)가 있는 테이블이 만들어진다.

<table class="table table-bordered">

모든 셀에 테두리가 만들어 진다.

<table class="table table-striped">

한 줄 건너 배경색이 달라지는 스트라이프 형태의 테이블이 된다.

<table class="table table-hover">

테이블에 마우스를 올렸을 때 마우스 커서가 있는 행이 다른 색으로 변한다.

<table class="table table-condensed">

셀 패딩이 반으로 감소돼 작은 크기의 테이블이 된다.

테이블에 적용된 클래스 선택자의 경우 혼합해서 사용 가능하다.

<table class="table table-bordered table-hover">

테이블 행 또는 셀에 색상 지정

클래스	설명
.active	특정 행이나 셀에 마우스 오버 색상 적용 색상은 회색
.success	성공 또는 긍정적인 작업 표시 색상은 연두색 계열 #d0e9c6
.info	중립적인 정보 변경이나 작업 표시
.warning	주의를 필요로 하는 경고를 표시 색상은 겨자색 계열 #faf2cc
.danger	위험 또는 잠재적으로 부정적인 작업 표시 색상은 붉은색 계열 #ebcccc

<div class="table-responsive"></div>

부트스트랩에서는 화면 폭이 좁을 때(768px 이하) 하단에 스크롤바가 나타나며 수평으로 스크롤해서 테이블을 볼 수 있게 했다. <table> 태그 외곽에 <div> 태그로 감싸서 table-responsive 클래스를 추가하면 반응형 테이블로 사용할 수 있다.