HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

부트스트랩 테이블

❮ 이전의 다음 ❯

부트스트랩 기본 테이블

기본 부트스트랩 테이블에는 가벼운 패딩과 수평 구분선만 있습니다.

.table클래스는 테이블에 기본 스타일을 추가합니다 .

예시

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

줄무늬 행

이 .table-striped클래스는 테이블에 얼룩말 줄무늬를 추가합니다.

예시

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

테두리가 있는 테이블

이 .table-bordered클래스는 테이블과 셀의 모든 면에 테두리를 추가합니다.

예시

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

호버 행

클래스 는 .table-hover테이블 행에 호버 효과(회색 배경색)를 추가합니다.

예시

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

요약 테이블

이 .table-condensed클래스는 셀 패딩을 반으로 잘라 테이블을 더 컴팩트하게 만듭니다.

예시

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

컨텍스트 클래스

상황별 클래스를 사용하여 테이블 행( <tr>) 또는 테이블 셀( <td>)에 색상을 지정할 수 있습니다.

예시

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

사용할 수 있는 컨텍스트 클래스는 다음과 같습니다.

등급 설명
.active 표 행 또는 표 셀에 호버 색상을 적용합니다.
.success 성공 또는 긍정적인 작업을 나타냅니다.
.info 중립적인 정보 변경 또는 조치를 나타냅니다.
.warning 주의가 필요할 수 있는 경고를 나타냅니다.
.danger 위험하거나 잠재적으로 부정적인 행동을 나타냅니다.

반응형 테이블

.table-responsive클래스는 반응형 테이블을 생성합니다 . 그러면 표가 소형 기기(768px 미만)에서 가로로 스크롤됩니다. 너비가 768px보다 큰 항목을 볼 때 차이가 없습니다.

예시

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

연습으로 자신을 테스트하십시오

연습:

클래스 속성을 추가하여 테이블을 기본 부트스트랩 테이블로 스타일 지정합니다.

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

전체 부트스트랩 테이블 참조

모든 테이블 클래스에 대한 전체 참조를 보려면 전체 부트스트랩 테이블 참조 로 이동하십시오 .


❮ 이전의 다음 ❯