기본 부트스트랩 테이블에는 얇은 패딩과 수평 구분선만 있습니다.
.table 클래스는 테이블에 기본 스타일을 추가합니다.
The .table class adds basic styling (light padding and only horizontal dividers) to a table:
| First Name | Last Name | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
.table-striped 클래스는 테이블에 얼룩말 줄무늬(zebra-stripes)를 추가합니다.
The .table class adds basic styling (light padding and only horizontal dividers) to a table:
| First Name | Last Name | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
.table-bordered 테이블과 셀의 모든 면에 테두리(borders)를 추가합니다.
The .table-bordered class adds borders to a table:
| First Name | Last Name | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
.table-hover 클래스는 테이블의 가로 행에 호버 효과(회색 배경색)를 추가합니다.
The .table-hover class enables a hover state on table rows:
| First Name | Last Name | |
|---|---|---|
| John | Doe | john@examle.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
.table-condensed 클래스는 셀 패딩을 절반으로 줄여 테이블을 더 간결하게 만듭니다.
The .table-condensed class makes a table more compact by cutting cell padding in half:
| First Name | Last Name | |
|---|---|---|
| John | Doe | john@examle.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
컨텍스추얼 클래스는 테이블 가로 행(<tr>) 또는 테이블 셀(<td>)에 색상을 지정할 수 있습니다.
Contextual Classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.
| First Name | Last Name | |
|---|---|---|
| Default | Defaultson | def@somemail.com |
| Success | Doe | john@somemail.com |
| Danger | Moe | mary@example.com |
| Info | Dooley | july@wxample.com |
| Warning | Refs | bo@example.com |
| Active | Activeson | act@example.com |
사용할 수 있는 컨텍스추얼 클래스는 아래와 같습니다.
| Class | Description |
.active | 테이블 가로 행이나 테이블 셀에 호버 색상을 적용합니다. |
|---|---|
.success | 성공 또는 긍정적인 작업을 나타냅니다. |
.info | 중립적 정보 변경 또는 작업을 나타냅니다. |
.warning | 주의가 필요한 경고를 나타냅니다. |
.danger | 위험하거나 잠재적으로 부정적인 작업을 나타냅니다. |
.table-responsive 클래스는 반응형 테이블을 만듭니다.
그러면 테이블이 소형 장치(768px 미만) 가로로 스크롤됩니다.
너비가 768px보다 큰 화면에서 볼 때는 차이가 없습니다.
The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:
| # | First Name | lsdt Name | Age | City | country |
|---|---|---|---|---|---|
| 1 | Anna | Pitt | 35 | New York | USA |