[Bootstrap] Table

1.  기본 테이블

✅ `.table`

• 기본 스타일의 테이블 (패딩 + 수평 줄)

<table class="table">
  …
</table>

---

2. 테이블 스타일 옵션

2.1 줄무늬 테이블 (`.table-striped`)

• 행마다 배경색이 번갈아 적용 (지브라 스타일)

<table class="table table-striped">...</table>

 

2.2 테두리 있는 테이블 (`.table-bordered`)

• 모든 셀에 테두리 표시

<table class="table table-bordered">...</table>

 

2.3 마우스 오버 효과 (`.table-hover`)

• 마우스를 올렸을 때 행의 배경색이 회색으로 변경

<table class="table table-hover">...</table>

 

2.4 검정 테이블 (`.table-dark`)

• 전체 배경이 어두운 색으로 변경됨

<table class="table table-dark">...</table>

 

2.5 어두운 + 줄무늬 (`.table-dark.table-striped`)

• 어두운 배경 + 지브라 스타일

<table class="table table-dark table-striped">...</table>

 

2.6 테두리 없는 테이블 (`.table-borderless`)

• 모든 테두리를 제거

<table class="table table-borderless">...</table>

---

3. 테이블 색상 (Contextual Classes)

색상 클래스 사용 위치

• `<table>`, `<tr>`, `<td>`에 적용 가능

사용 가능한 클래스와 의미:

클래스	설명
`.table-primary`	파란색 – 중요한 작업
`.table-success`	초록색 – 성공 또는 긍정적 작업
`.table-danger`	빨간색 – 위험 또는 부정적 작업
`.table-info`	밝은 파란색 – 중립 정보
`.table-warning`	주황색 – 주의가 필요한 경우
`.table-active`	회색 – hover 효과 (행 또는 셀에 적용)
`.table-secondary`	진한 회색 – 보조 정보
`.table-light`	밝은 회색 – 가벼운 정보
`.table-dark`	어두운 회색 – 강한 대비

 

 

✅ 테이블 헤더에만 색상 적용도 가능

<thead class="table-primary">...</thead>

---

4. 테이블 크기 조절

• 작은 테이블 (`.table-sm`)
• 셀 패딩이 절반으로 줄어들어 전체적으로 작아짐

<table class="table table-sm">...</table>

---

5. 반응형 테이블

• `.table-responsive` 
• 테이블이 화면 너비를 넘으면 가로 스크롤 생성

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

✅ 화면 크기에 따른 반응형 클래스

클래스	적용 조건
`.table-responsive-sm`	너비 < 576px
`.table-responsive-md`	너비 < 768px
`.table-responsive-lg`	너비 < 992px
`.table-responsive-xl`	너비 < 1200px
`.table-responsive-xxl`	너비 < 1400px

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