表格布局

​基本用法

¥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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:table-fixed to only apply the table-fixed utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​断点和媒体查询

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:table-fixed to apply the table-fixed utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.