テーブル
テーブルレイアウトアルゴリズムを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
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>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>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>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>一部の列の幅を手動で設定でき、残りの利用可能な幅は、明示的な幅のない列間で均等に分割されます。最初の行で設定された幅が、テーブル全体の列幅を設定します。
プレフィックスa table-layout ユーティリティ md: のようなブレークポイントバリアントとともに、ユーティリティを適用するのはmedium 画面サイズ以上
<div class="table-none md:table-fixed ..."> <!-- ... --></div>バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。