Lzh on GitHub

table-layout

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

快速参考

类名样式
table-autotable-layout: auto;
table-fixedtable-layout: fixed;

示例

自动调整列宽

使用 table-auto 工具类可以自动调整表格列宽以适应单元格内容：

TODO 存在问题

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>

使用固定列宽

使用 table-fixed 工具类可以忽略表格单元格的内容，并为每列使用固定宽度：

TODO 存在问题

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>

你可以手动设置某些列的宽度，剩余的可用宽度将平均分配给没有明确宽度的列。第一行中设置的宽度将决定整个表格的列宽。

响应式设计

在 table-layout 工具类前加上一个断点变体，例如 md:，以仅在中等屏幕尺寸及以上应用该工具类：

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

在 变体文档 中了解更多关于使用变体的信息。