• Q&A
  • 회원가입
  • 로그인

[basic] BS4 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블

목차
  1. Table Basic (기본 테이블)
  2. Table strip (테이블 얼룩말 줄무늬) IE9 이상
  3. Table border (테이블 테두리)
  4. Table hover (테이블 허버)
  5. Table Dark (검정 테이블)
  6. Table Dark + Strip (검정 얼룩말 줄무늬 테이블)
  7. Table Dark + Hover (검정 테이블 허버)
  8. Table borderless (테두리 없는 테이블)
  9. TABLE, TR, TD 태그용 - 의미별 배경색 클래스
  10. Table Thead (테이블 헤드 배경색)
  11. Table Small Size (좁은폭 테이블)
  12. Table Responsive (반응형 테이블)

※ BS4엔 BS3보다 클래스가 많이 추가됨.

 

Table Basic (기본 테이블)

(.table) 클래스 사용.

 

<table class="table">

  ...

</table>

 

약간의 padding과 가로선 존재.

 

Table strip (테이블 얼룩말 줄무늬) IE9 이상

(.table-striped) 클래스 추가.

 

<table class="table table-striped">

  ...

</table>

 

※ <tbody> 안 홀수 행에 옅은 회색 배경색 추가. (얼룩말줄무늬)

※  :nth-child 선택자 사용하므로, IE9 이상부터 사용 가능.

 

Table border (테이블 테두리)

(.table-bordered) 클래스 추가.

 

<table class="table table-bordered">

  ...

</table> 


테이블 모서리와 셀에 테두리선 추가.

 

Table hover (테이블 허버)

(.table-hover) 클래스 추가.

 

<table class="table table-hover">

  ...

</table> 


<tbody> 안 행에 옅은 회색배경색 hover 추가.

 

Table Dark (검정 테이블)

(.table-dark) 클래스 추가.

 

<table class="table table-dark">

  ...

</table> 


 

Table Dark + Strip (검정 얼룩말 줄무늬 테이블)

(.table-dark / .table-striped) 클래스 둘 다 추가.

 

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

  ...

</table> 


 

Table Dark + Hover (검정 테이블 허버)

(.table-dark / .table-hover) 클래스 둘 다 추가.

 

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

  ...

</table> 


 

Table borderless (테두리 없는 테이블)

(.table-borderless) 클래스 추가.

 

<table class="table table-borderless">

  ...

</table> 


 

TABLE, TR, TD 태그용 - 의미별 배경색 클래스

 

<table class="table">

  <thead>

    <tr><th>테이블 색깔</th></tr>

  </thead>

  <tbody>

    <tr><td>기본색 (흰색)</td></tr>      

    <tr class="table-primary"><td>하늘색 (중요)</td></tr>

    <tr class="table-success"><td>녹색 (성공・긍정)</td></tr>

    <tr class="table-danger"><td>빨간색 (위험・잠재적으로 부정적)</td></tr>

    <tr class="table-info"><td>파란색 (중립적정보)</td></tr>

    <tr class="table-warning"><td>주황색 (주의・경고)</td></tr>

    <tr class="table-active"><td>회색  (테이블 행 또는 테이블 셀에 호버 색상 적용.)</td></tr>

    <tr class="table-secondary"><td>회색 (덜 중요)</td></tr>

    <tr class="table-light"><td>연회색</td></tr>

    <tr class="table-dark text-dark"><td>진회색</td></tr>

  </tbody>

</table>

 

예제보기

 

Table Thead (테이블 헤드 배경색)

(.thead-dark) 클래스: 진남색 

(.thead-light) 클래스: 회색

 

  <table class="table">

    <thead class="thead-dark">

      <tr> <th>thead-dark</th></tr>

    </thead>

    <tbody>

      <tr><td>진남색</td></tr></tr>

    </tbody>

  </table>

 

  <table class="table">

    <thead class="thead-light">

      <tr><th>thead-light</th></tr>

    </thead>

    <tbody>

      <tr><td>연회색</td></tr></tr>

    </tbody>

  </table>

 

결과보기


Table Small Size (좁은폭 테이블)

(.table-sm) 클래스 추가.


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

  ...

</table> 


cf. BS3: table-condensed 클래스 사용.


Table Responsive (반응형 테이블)

 

.table-responsive

반응형 테이블. 992px 미만 기기에서 하단 가로스크롤바 생성.

 

 

.table-responsive-sm

576px 미만 기기에서 하단 가로 스크롤바 생성

 

.table-responsive-md

768px 미만 기기에서 하단 가로 스크롤바 생성

 

.table-responsive-lg

992px 미만 기기에서 하단 가로 스크롤바 생성

 

.table-responsive-xl

1200px 미만 기기에서 하단 가로 스크롤바 생성

 


[예제]

 

<div class="table-responsive">

  <table class="table">

    ...

  </table>

</div>

 

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

  <table class="table">

    ...

  </table>

</div>

 

예제보기 

※ BS3 경우, .table-responsive (768px 미만 스크롤생성) 클래스만 지원.

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012