Bootstrap – Bootstrap 4 테이블

Bootstrap 4 기본 테이블

기본 Bootstrap 4 테이블에는 가벼운 패딩과 수평 구분선이 있다.

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

예제

<table class="table" style="width: 100%; margin-bottom: 1rem; ">
<thead>
<tr>
<th style="padding: 0.75rem; text-align: -webkit-match-parent; border-top: 1px solid #dee2e6; font-weight: bold; border-bottom: 2px solid #dee2e6;">Firstname</th>
<th style="padding: 0.75rem; text-align: -webkit-match-parent; border-top: 1px solid #dee2e6; font-weight: bold; border-bottom: 2px solid #dee2e6;">Lastname</th>
<th style="padding: 0.75rem; text-align: -webkit-match-parent; border-top: 1px solid #dee2e6; font-weight: bold; border-bottom: 2px solid #dee2e6;">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6;">John</td>
<td style="padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6;">Doe</td>
<td style="padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6;">john@example.com</td>
</tr>
<tr>
<td style="padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6;">Mary</td>
<td style="padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6;">Moe</td>
<td style="padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6;">mary@example.com</td>
</tr>
<tr>
<td style="padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6;">July</td>
<td style="padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6;">Dooley</td>
<td style="padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6;">july@example.com</td>
</tr>
</tbody>
</table>

줄무늬 행

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

예제

<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>

경계가 있는 테이블

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

예제

<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>

호버 행

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

예제

<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>

블랙/다크 테이블

.table-dark 클래스는 테이블에 검정색 배경을 추가한다.

예제

<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>

어두운 줄무늬 테이블

.table-dark 및 .table-striped를 결합하여 어두운 줄무늬 테이블을 만든다.

예제

<table class="table table-dark table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>

호버링 가능한 다크 테이블

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

예제

  <table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

경계선 없는 테이블

.table-borderless 클래스는 테이블에서 테두리를 제거한다.

예제

  <table class="table table-borderless">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>