twitter-bootstrap => 테이블

비고

내용 순서 및 복합 표 표 리플 로우 스타일이 내용의 시각적 순서를 변경한다는 점에 유의하십시오. 이 스타일을 올바른 형식의 간단한 데이터 테이블에만 적용하고 (특히 레이아웃 테이블에는 사용하지 말아야 함) 각 행과 열에 적합한 표 머리글 셀을 사용하십시오.

또한이 클래스는 rowspan 또는 colspan 속성을 사용하여 여러 행이나 열에 걸쳐있는 셀이있는 테이블의 경우 올바르게 작동하지 않습니다.

기본 테이블

부트 스트랩은 .table 클래스를 사용하여 테이블에 대한 사용자 정의 스타일을 정의합니다. 수평 분할 자 및 패딩을 보려면 .table 클래스를 <table> 에 추가하면 .table .

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

고급 스타일링이 포함 된 표

부트 스트랩은 고급 테이블 스타일을위한 몇 가지 클래스를 제공합니다.

스트라이프 행

.table-striped 클래스를 추가하면 스트라이프 행이있는 테이블이 생성됩니다.

<table class="table table-striped">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

참고 사항 :

스트라이프 테이블은 :nth-child CSS 선택기를 통해 스타일이 지정되며 Internet Explorer 8에서는 사용할 수 없습니다.

경계가있는 표

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

<table class="table table-bordered">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

행에 마우스를 올리세요.

.table-hover 클래스를 추가하면 사용자가 행 위에 마우스를 올려 놓으면 강조 표시된 행이있는 표가 나타납니다.

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

응축 테이블

.table-condensed 클래스를 추가하면 기본 셀 패딩이 절반으로 .table-condensed 보다 컴팩트 한 테이블을 갖게됩니다.

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

문맥에 맞는 수업

부트 스트랩 테이블은 컨텍스트 색상을 지원합니다. 테이블 행이나 셀의 배경색을 변경하려면 다음 대화 형 클래스 중 하나를 추가하면됩니다 : .active , .success , .info , .warning , .danger

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr class="success"><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td class="info">Bloggs</td></tr>
  </tbody>
</table>

반응 형 테이블

응답 가능한 테이블을 만들려면 .table-responsive 클래스를 사용하여 HTML 컨테이너의 .table 을 래핑해야합니다.

<div class="table-responsive">
  <table class="table">
    <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
    <tbody>
      <tr><td>John</td><td>Doe</td></tr>
      <tr><td>Fred</td><td>Bloggs</td></tr>
    </tbody>
  </table>
</div>

반응 형 테이블은 작은 장치 (<768px)에서 가로로 스크롤합니다. 768px보다 큰 화면에는 차이가 없습니다.

테이블 리플 로우 - 수직 헤더

수직 헤더가있는 테이블 얻기.

트위터 부트 스트랩은 잘 포맷 된 일반 테이블에서 수직 헤더를 지원합니다. 이것을 달성하기 위해서 .table-reflow 클래스를 사용 .table-reflow

.table-reflow formed 테이블에서 twitter 부트 스트랩 .table-reflow 클래스를 사용하여 수직 헤더가있는 테이블을 얻습니다. 또한 .table-striped 및 .table-hover 를 사용하여 열에 .table-hover 를 .table-hover 결합 할 수 있습니다.

<table class="table table-striped table-hover table-reflow">
    <thead>
        <tr>
            <th ><strong> First Name: </strong></th>
            <th ><strong> Last Name: </strong></th>
            <th ><strong> Email: </strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> John </td>
            <td> Doe </td>
            <td> [email protected] </td>
        </tr>
        <tr>
            <td> Joane </td>
            <td> Donald </td>
            <td> [email protected] </td>
        </tr>
    </tbody>
</table>

여기서 v4 alpha 문서를 확인하십시오 : twitter-bootstrap .table-reflow

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

twitter-bootstrap
테이블

수색…

비고