table-layout

用于控制表格布局算法的工具类。

快速参考

类	属性
table-auto	table-layout: auto;
table-fixed	table-layout: fixed;

示例

自动调整列宽

使用 table-auto 工具类，根据单元格内容自动调整表格列宽：

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

<!-- [!code classes:table-auto] -->
<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 工具类，忽略表格单元格内容，为每列使用固定宽度：

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

<!-- [!code classes:table-fixed] -->
<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>

你可以手动设置部分列的宽度，剩余可用宽度会在未显式指定宽度的列之间均分。第一行设置的宽度会决定整张表的列宽。

响应式设计

使用 md: 等断点变体作为 table-layout 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

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

了解如何使用变体，请参阅变体文档。