表格布局

​基本用法

¥Basic usage

​自动

¥Auto

使用 table-auto 允许表格自动调整列的大小以适合单元格的内容。

¥Use table-auto to allow the table to automatically size columns to fit the contents of the cell.

<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>

​固定

¥Fixed

使用 table-fixed 允许表格忽略内容并为列使用固定宽度。第一行的宽度将设置整个表格的列宽。

¥Use table-fixed to allow the table to ignore the content and use fixed widths for columns. The width of the first row will set the column widths for the whole table.

你可以手动设置某些列的宽度，其余可用宽度将在没有明确宽度的列之间平均分配。

¥You can manually set the widths for some columns and the rest of the available width will be divided evenly amongst the columns without explicit width.

<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>

---

​有条件地应用

​悬停、聚焦和其他状态

Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如，使用hover:table-fixed 仅在 hover 时应用 table-fixed 工具。

<table class="hover:table-fixed">
  <!-- ... -->
</table>

有关所有可用状态修饰符的完整列表，请查看悬停、聚焦、以及其他状态 文档。

​断点和媒体查询

你还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗黑模式、首选减少运动等。例如，使用 md:table-fixed 仅在中等屏幕尺寸及以上时应用 table-fixed 工具。

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

要了解更多信息，请查看有关 响应式设计、暗黑模式、以及 其他媒体查询修饰符 的文档。