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

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

 

 

.table - (padding과 회색 가로선 추가)

.table-striped - (<tbody>내의 가로줄 한 줄 너머마다 배경색 넣기)

.table-bordered - (테이블과 셀에 경계선 넣기)

.table-hover - (<tbody>안 행에 hover 효과 주기)

.table-condensed - (셀 padding 반으로 줄여 좀 더 응집되게 만들기)

 



.active - 특정 줄이나 셀에 옅은 회색 배경 적용

.success - (성공/긍정 동작 표시) - 옅은 청록색 배경색

.info - (중립적인 변화나 동작 표시) - 약간 옅은 청록색 배경색

.warning - (주의 요하는 경고 표시) - 아주 옅은 보라색

.danger - (위험/잠재적으로 부정적 동작 표시) - 약간 옅은 보라색

 


 

.table-responsive (반응형 테이블) - 가로 길이만 축소

 

 

 

Table Basic (기본)

 

<table class="table">

  ...

</table>

 

약간의 padding과 가로선 존재.

 

 

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

 

<table class="table table-striped">

  ...

</table>

 

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

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

 

 

Table border (테두리)

 

<table class="table table-bordered">

  ...

</table> 


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

 

 

Table hover (허버)

 

<table class="table table-hover">

  ...

</table> 


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

 

 

Table condense (응집테이블 = 좁은폭테이블)

 

<table class="table table-condensed">

  ...

</table> 


 

 

Table Contextual Color (맥락배경색)

 

.active

연회색 (호버 색상)

 

.success

연녹색 (성공・긍정적 액션)

 

.info

연청록 (중립적 정보변화나 조치)

 

.warning

아이보리 (주의 필요한 경고)

 

.danger

연보라 (위험・부정적 액션)

 


 

<!-- 행 (row: <tr>) -->

<tr class="active">...</tr>

<tr class="success">...</tr>

<tr class="warning">...</tr>

<tr class="danger">...</tr>

<tr class="info">...</tr>


<!-- 셀 (cell : <th> , <td>) -->

<tr>

  <td class="active">...</td>

  <td class="success">...</td>

  <td class="warning">...</td>

  <td class="danger">...</td>

  <td class="info">...</td>

</tr>

 

※ 스크린리더 같은 기기엔 해당 색깔 정보가 제공 안 됨. (색깔 텍스트 별도 표시 필요)

 

 

Table Responsive (반응형테이블)

 

<div class="table-responsive">

  <table class="table">

    ...

  </table>

</div>

 


 

※ 주의1

.table-responsive 클래스는 overflow-y: hidden; 속성 사용하는데, 

드롭다운메뉴처럼 아래로 길게 나오는 요소 자를 수 있으니 주의. ㅡㅡ;

 

※ 주의2

반응형테이블 width 관여 Firefox 필드셋 스타일 해결핵. 자세히보기

@-moz-document url-prefix() {

  fieldset { display: table-cell; }

}

 

※ 방법: 테이블 감싸는 div 요소에 .table-responsive 클래스 추가.

※ 효과: 768 픽셀 미만 기기에서 하단에 가로 스크롤바 생성됨.


오늘도 즐겁게 열심히 .....

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