테이블은 날짜 선택과 같은 타사의 캘랜더 모듈에서 많이 되어 기본적으로 스타일을 사용자가 선택하도록 설계되었습니다. 기본 클래스 .table을 <table>에 추가 한 다음 사용자 정의 스타일이나 다양한 포함 된 추가 클래스로 확장하면됩니다.
가장 기본적인 테이블 마크 업을 사용하여 테이블 기반 테이블이 부트스트랩 에서 어떻게 나타나는지 알수 있습니다.
.table-bordered 클래스를 추가하여 테이블과 셀의 모든 테두리를 변경할 수 있습니다.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Mark
Otto
@TwBootstrap
3
Jacob
Thornton
@fat
4
Larry the Bird
@twitter
<tableclass="table table-bordered"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</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>Mark</td><td>Otto</td><td>@TwBootstrap</td></tr><tr><thscope="row">3</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">4</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Mark
Otto
@TwBootstrap
3
Jacob
Thornton
@fat
4
Larry the Bird
@twitter
<tableclass="table table-bordered table-inverse"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</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>Mark</td><td>Otto</td><td>@TwBootstrap</td></tr><tr><thscope="row">3</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">4</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
마우스에 반응하는 행
.table-hover t클래스를 추가하여 테이블행에 마우스 포인터가 올라오면 스타일을 변경하도록 지정할 수 있습니다.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-hover"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</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>
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-hover table-inverse"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</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>
작은 테이블
.table-sm 클래스를 사용하여 셀크기를 반으로 줄임으로써 작은 테이블을 만들 수 있습니다.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-sm"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</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>
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<tableclass="table table-sm table-inverse"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</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>
컨텍스트 클래스
컨텍스트 클래스를 사용하여 행 혹은 셀의 색상을 지정할 수 있습니다.
Type
Column heading
Column heading
Column heading
Active
Column content
Column content
Column content
Default
Column content
Column content
Column content
Primary
Column content
Column content
Column content
Secondary
Column content
Column content
Column content
Success
Column content
Column content
Column content
Danger
Column content
Column content
Column content
Warning
Column content
Column content
Column content
Info
Column content
Column content
Column content
Light
Column content
Column content
Column content
Dark
Column content
Column content
Column content
<!-- On rows --><trclass="table-active">...</tr><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-active">...</td><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>
.
#
Column heading
Column heading
Column heading
1
Column content
Column content
Column content
2
Column content
Column content
Column content
3
Column content
Column content
Column content
4
Column content
Column content
Column content
5
Column content
Column content
Column content
6
Column content
Column content
Column content
7
Column content
Column content
Column content
8
Column content
Column content
Column content
9
Column content
Column content
Column content
<!-- On rows --><trclass="bg-primary">...</tr><trclass="bg-success">...</tr><trclass="bg-warning">...</tr><trclass="bg-danger">...</tr><trclass="bg-info">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="bg-primary">...</td><tdclass="bg-success">...</td><tdclass="bg-warning">...</td><tdclass="bg-danger">...</td><tdclass="bg-info">...</td></tr>
반응형 테이블
.table 클래스에 .table-reponsive 클래스를 추가하여 테이블에 반응성을 추가할 수 있으며, 768px 작은 해상도에서 가로로 스크롤 되게 변경합니다. 그 이상의 크기에서는 변동이 없습니다.
수직 클립핑/절단
반응 형 테이블은 overflow-y : hidden을 사용합니다.이 오버 플로우는 테이블의 아래쪽이나 위쪽 가장자리를 넘어서는 모든 내용을 잘라냅니다. 특히 이것은 드롭 다운 메뉴 및 기타 타사 위젯을 잘라낼 수 있습니다.
댓글
댓글 쓰기