Table

/scss/elements/table.scss

v.0.1.0

기본 사용

데이터 테이블

thead	thead	thead	thead
1	2	3	4
1	2	3	4
1	2	3	4

하나	둘	셋	넷
1	2	3	4

thead	thead	thead	thead
1	2	3	4
1	2	3	4

<table class="gn-table is-full">
  <thead>
    <tr>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>


<table class="gn-table is-thead2 is-full">
  <thead>
    <tr>
      <th>하나</th>
      <th>둘</th>
      <th>셋</th>
      <th>넷</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>


<table class="gn-table is-thead3 is-full">
  <thead>
    <tr>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
      <th>thead</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

색상, 크기

primary 색상 및 상태별 색상

1	2	3	4
5	6	7	8
9	10	11	12

1	2	3	4
5	6	7	8
9	10	11	12


<table class="gn-table is-full">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr class="is-primary-light">
    <td>5</td>
    <td>6</td>
    <td class="is-primary">7</td>
    <td>8</td>
  </tr>
  <tr class="is-primary-light">
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</table>


<table class="gn-table is-full">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr class="is-danger-light">
    <td>5</td>
    <td>6</td>
    <td class="is-danger">7</td>
    <td>8</td>
  </tr>
  <tr class="is-success-light">
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</table>

스타일

테두리, 스트라이프

1	2	3	4
5	6	7	8
9	10	11	12

<table class="gn-table is-full is-border is-stripe">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</table>

상태 (hover)

1	2	3	4
5	6	7	8
9	10	11	12

<table class="gn-table is-full">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr class="is-hover">
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</table>