表格
table-layout
用于控制表格布局算法的工具。
| 类 | 样式 |
|---|---|
table-auto | table-layout: auto; |
table-fixed | table-layout: fixed; |
示例(Examples)
¥Examples
自动调整列大小(Sizing columns automatically)
¥Sizing columns automatically
使用 table-auto 工具自动调整表格列的大小以适合其单元格的内容：
¥Use the table-auto utility to automatically size table columns to fit the contents of its cells:
| Song | Artist | Year |
|---|---|---|
| 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>使用固定列宽(Using fixed column widths)
¥Using fixed column widths
使用 table-fixed 工具忽略表格单元格的内容并对每列使用固定宽度：
¥Use the table-fixed utility to ignore the content of the table cells and use fixed widths for each column:
| Song | Artist | Year |
|---|---|---|
| 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>你可以手动设置某些列的宽度，其余可用宽度将在没有明确宽度的列之间均匀分配。第一行设置的宽度将设置整个表的列宽。
¥You can manually set the widths for some columns and the rest of the available width will be divided evenly amongst columns without an explicit width. The widths set in the first row will set the column width for the whole table.
响应式设计(Responsive design)
¥Responsive design
在 table-layout 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="table-none md:table-fixed ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。