[Bootstrap] 테이블(Table)

1. table 태그를 위한 클래스

• table : table 태그에 적용할 기본 클래스
• table-striped : td 태그 부분이 흰색과 회색으로 번갈아 가며 표시됨
• table-bordered : 외곽선이 표시됨
• table-hover : row에 마우스를 올리면 색상이 변경됨
• table-dark : 테이블의 배경이 검정색으로 설정됨 (BS4)
• table-borderless : 모든 선이 사라짐 (BS4)
• table-condensed : row의 높이가 줄어듬 (BS3)
• table-sm : row의 높이가 줄어듬 (BS4)

<table class="table">
<table class="table table-striped">
<table class="table table-bordered">
<table class="table table-hover">
<table class="table table-dark">
<table class="table table-borderless">
<table class="table table-sm">

 

2. table row 색상 설정 클래스

• table-primary (BS4)
• table-success (BS4), success(BS3)
• table-danager (BS4), danager(BS3)
• table-info (BS4), info(BS3)
• table-warning (BS4), warning (BS3)
• table-active (BS4), active (BS3)
• table-secondary (BS4)
• table-light (BS4)
• table-dark (BS4)
• default (BS3)

<tr class="table-primary">
<tr class="table-success">
<tr class="table-danger">
<tr class="table-info">
<tr class="table-warning">
<tr class="table-active">
<tr class="table-secondary">
<tr class="table-light">
<tr class="table-dark">

 

3. 테이블 헤더 색상 설정

• thead-dark (BS4)
• thead-light (BS4)

<thead class="thead-dark">
<thead class="thead-light">

 

4. 반응형 테이블 설정

• table-responsive : 768px 이하가 되면 좌우 스크롤바가 생김. 단, 한글은 계산되지 않음
• table-responsive-sm (BS4) : 576px 이하가 되면 좌우 스크롤 생김
• table-responsive-md (BS4) : 768px 이하가 되면 좌우 스크롤 생김
• table-responsive-lg (BS4) : 992px 이하가 되면 좌우 스크롤 생김
• table-responsive-xl (BS4) : 1200px 이하가 되면 좌우 스크롤 생김

<table class="table table-responsive">
<table class="table table-responsive-sm">
<table class="table table-responsive-md">
<table class="table table-responsive-lg">
<table class="table table-responsive-xl">

 

References

source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/main/Table/src/main/webapp
[인프런] 윤재성의 Bootstrap 4 & 3 Framework Tutorial