Twitter Bootstrap으로 테이블에 스타일 적용

Twitter Bootstrap으로 테이블에 스타일 적용

---

Twitter Bootstrap으로 테이블에 스타일을 적용 할 수 있는지 아는 사람이 있습니까? 일부 오래된 자습서에서는 일부 테이블 예제를 볼 수 있지만 Bootstrap 사이트 자체에서는 볼 수 없습니다.

설정을 시도했지만 내 페이지의 테이블에는 스타일이 거의 적용되지 않았습니다.

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Language</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Some</td>
            <td>One</td>
            <td>English</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Joe</td>
            <td>Sixpack</td>
            <td>English</td>
        </tr>
    </tbody>
</table>

지원하려면 어떤 수업이 필요합니까?

---

Bootstrap은 다양한 테이블 스타일을 제공합니다. Base CSS-Tables for documentation 및 예제를 살펴보십시오 .

다음 스타일은 멋진 테이블을 제공합니다.

<table class="table table-striped table-bordered table-condensed">
  ...
</table>

---

Twitter 부트 스트랩 테이블은 스타일을 지정하고 잘 디자인 할 수 있습니다. 테이블에 클래스를 추가하기 만하면 테이블의 스타일을 지정할 수 있으며 멋지게 보일 것입니다. 데이터 보고서, 정보 표시 등에 사용할 수 있습니다.

당신이 사용할 수있는 :

basic table
Striped rows
Bordered table
Hover rows
Condensed table
Contextual classes
Responsive tables

스트라이프 행 테이블 :

    <table class="table table-striped" width="647">
    <thead>
    <tr>
    <th>#</th>
    <th>Name</th>
    <th>Address</th>
    <th>mail</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Thomas bell</td>
    <td>Brick lane, London</td>
    <td>thomas@yahoo.com</td>
    </tr>
    <tr>
    <td height="29">2</td>
    <td>Yan Chapel</td>
    <td>Toronto Australia</td>
    <td>Yan@yahoo.com</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Pit Sampras</td>
    <td>Berlin, Germany</td>
    <td>Pit @yahoo.com</td>
    </tr>
    </tbody>
    </table>

요약 된 테이블 :

테이블을 압축하려면 class =”table table-condensed”클래스를 추가해야합니다.

    <table class="table table-condensed" width="647">
    <thead>
    <tr>
    <th>#</th>
    <th>Sample Name</th>
    <th>Address</th>
    <th>Mail</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Thomas bell</td>
    <td>Brick lane, London</td>
    <td>thomas@yahoo.com</td>
    </tr>
    <tr>
    <td height="29">2</td>
    <td>Yan Chapel</td>
    <td>Toronto Australia</td>
    <td>Yan@yahoo.com</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Pit Sampras</td>
    <td>Berlin, Germany</td>
    <td>Pit @yahoo.com</td>
    </tr>
    <tr>
    <td></td>
    <td colspan="3" align="center"></td>
    </tr>
    </tbody>
    </table>

참조 : http://twitterbootstrap.org/twitter-bootstrap-table-example-tutorial

---

정보, 오류, 경고 또는 성공과 같은 TR 클래스를 적용 할 수도 있습니다.

---

또 다른 멋진 테이블입니다. 좋은 호버링 효과를 제공하기 때문에 "table-hover"클래스를 추가했습니다.

   <h3>NATO Phonetic Alphabet</h3>    
   <table class="table table-striped table-bordered table-condensed table-hover">
   <thead>
    <tr> 
        <th>Letter</th>
        <th>Phonetic Letter</th>

    </tr>
    </thead>
  <tr>
    <th>A</th>
    <th>Alpha</th>

  </tr>
  <tr>
    <td>B</td>
    <td>Bravo</td>

  </tr>
  <tr>
    <td>C</td>
    <td>Charlie</td>

  </tr>

</table>

---

부트 스트랩은 테이블에 대한 다양한 클래스를 제공합니다.

 <table class="table"></table>
 <table class="table table-bordered"></table>
 <table class="table table-hover"></table>
 <table class="table table-condensed"></table>
 <table class="table table-responsive"></table>

---

다음과 같이 모든 단일 행에 컨텍스트 클래스를 추가 할 수 있습니다.

<tr class="table-success"></tr>
<tr class="table-error"></tr>
<tr class="table-warning"></tr>
<tr class="table-info"></tr>
<tr class="table-danger"></tr>

위와 같이 테이블 데이터에 추가 할 수도 있습니다.

클래스를 table-sm 등 으로 설정하여 테이블 크기를 설정할 수 있습니다 .

사용자 정의 클래스를 추가하고 고유 한 스타일을 추가 할 수 있습니다.

<table class="table">
  <thead style = "color:red;background-color:blue">
    <tr>
      <th></th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>   
      <td>Asdf</td>
      <td>qwerty</td>
    </tr>
  </tbody>
</table>

이 방법으로 사용자 지정 스타일을 추가 할 수 있습니다. 예를 들어 어떻게 작동하는지 인라인 스타일링을 보여주었습니다. 클래스를 추가하고 CSS에서도 호출 할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/9595639/applying-styles-to-tables-with-twitter-bootstrap