table-layout

table-layout

table-layout 유틸리티는 테이블의 열(column) 너비를 자동으로(cell 내용 기반) 계산할지, 아니면 고정할지를 결정해 줘요.

출처: 문서

본문

클래스 스타일 (ClassStyles)

예시 (Examples)

열 너비 자동 계산하기 (Sizing columns automatically)

table-auto 유틸리티를 사용하면 cell의 내용에 맞춰 테이블 열의 너비를 자동으로 조절할 수 있어요:

<table class="table-auto">
  <thead>
    <tr>
      <th>Song</th>
      <th>Artist</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

고정 열 너비 사용하기 (Using fixed column widths)

table-fixed를 사용하면 테이블 cell의 내용은 무시하고 각 열에 고정된 너비를 사용해요:

<table class="table-fixed">
  <thead>
    <tr>
      <th>Song</th>
      <th>Artist</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

일부 열에만 너비를 직접 설정할 수 있고, 나머지 사용 가능한 너비는 명시적인 너비가 없는 열들 사이에 고르게 나눠져요. 첫 번째 행에 설정된 너비가 테이블 전체의 열 너비를 결정해요.

반응형 디자인 (Responsive design)

table-layout 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:

<div class="table-auto md:table-fixed ...">
  <!-- ... -->
</div>

더 알아보기 (Learn more)

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.