테이블
table-layout
테이블 레이아웃 알고리즘을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
table-auto | table-layout: auto; |
table-fixed | table-layout: fixed; |
예제
컬럼 크기 자동 조정
table-auto 유틸리티를 사용하면 테이블 컬럼의 크기를 셀 내용에 맞게 자동으로 조정할 수 있습니다.
| 노래 | 아티스트 | 연도 |
|---|---|---|
| The Sliding Mr. Bones (Next Stop, Pottersville) | Malcolm Lockyer | 1961 |
| Witchy Woman | The Eagles | 1972 |
| Shining Star | Earth, Wind, and Fire | 1975 |
<table class="table-auto"> <thead> <tr> <th>노래</th> <th>아티스트</th> <th>연도</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>고정된 컬럼 너비 사용하기
table-fixed 유틸리티를 사용하면 테이블 셀의 내용을 무시하고 각 컬럼에 고정된 너비를 적용할 수 있습니다.
| 노래 | 아티스트 | 연도 |
|---|---|---|
| The Sliding Mr. Bones (Next Stop, Pottersville) | Malcolm Lockyer | 1961 |
| Witchy Woman | The Eagles | 1972 |
| Shining Star | Earth, Wind, and Fire | 1975 |
<table class="table-fixed"> <thead> <tr> <th>노래</th> <th>아티스트</th> <th>연도</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>일부 컬럼의 너비를 수동으로 설정하면, 명시적으로 너비가 지정되지 않은 컬럼들은 남은 너비를 균등하게 나눠 가집니다. 첫 번째 행에 설정된 너비는 전체 테이블의 컬럼 너비를 결정합니다.
반응형 디자인
접두사 a table-layout 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="table-none md:table-fixed ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
