表格
table-layout
用於控制表格佈局演算法的 Utilities。
| Class | Styles |
|---|---|
table-auto | table-layout: auto; |
table-fixed | table-layout: fixed; |
範例
自動調整欄寬
使用 table-auto utility 根據儲存格內容自動調整表格欄寬。
| 歌曲 | 藝人 | 年份 |
|---|---|---|
| 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 utility 忽略儲存格內容，並為每欄使用固定寬度。
| 歌曲 | 藝人 | 年份 |
|---|---|---|
| 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>您可以手動設定某些欄的寬度，剩餘的可用寬度將在沒有明確寬度的欄之間平均分配。第一列中設定的寬度將設定整個表格的欄寬。
響應式設計
Prefixa table-layout utility 加上斷點變體，例如 md:，僅在中型medium 螢幕尺寸及以上套用 utility。
<div class="table-none md:table-fixed ..."> <!-- ... --></div>請參閱變體文件以瞭解有關使用變體的更多資訊。
