Skip to content

Tailwind CSS - 表格布局

Tailwind CSS - 表格布局

Tailwind 提供了实用工具来控制浏览器用于布局表格单元格、行和列的算法。这个选择会影响表格的性能和可预测性。

表格布局实用工具

主要有两个实用工具用于控制表格布局算法。

类名	CSS 属性	行为
table-auto	table-layout: auto;	浏览器根据其内容自动确定列宽。列会扩展以适应任何单元格中最宽的内容。
table-fixed	table-layout: fixed;	列宽由表格的宽度及其列的宽度决定（如果未设置宽度，则均等划分）。溢出的内容将被剪裁或换行。

何时使用 `table-auto` 或 `table-fixed`

使用 table-auto（默认） 当你希望表格列根据其内容动态调整大小时。它很方便，但如果某些内容过长，可能会导致布局不可预测。
使用 table-fixed 当你需要一个可预测且稳定的布局时，尤其适用于大型数据表格。它提供了更好的性能，因为浏览器在渲染之前不需要读取整个表格内容。对于大多数数据驱动的表格来说，这是推荐的选择。

实际示例

示例：`table-auto`

请注意下面示例中“Description”列如何显著扩展以适应其长内容，从而缩小了其他列的宽度。

<div class="p-8 bg-slate-50">
  <h3 class="text-xl font-semibold mb-4">Auto Layout Table (`table-auto`)</h3>
  <div class="shadow-md rounded-lg overflow-hidden">
    <table class="table-auto w-full text-sm text-left text-slate-500">
      <thead class="text-xs text-slate-700 uppercase bg-slate-100">
        <tr>
          <th scope="col" class="px-6 py-3">Acronym</th>
          <th scope="col" class="px-6 py-3">Stands For</th>
          <th scope="col" class="px-6 py-3">Description</th>
        </tr>
      </thead>
      <tbody class="divide-y">
        <tr class="bg-white">
          <td class="px-6 py-4 font-medium text-slate-900">API</td>
          <td class="px-6 py-4">Application Programming Interface</td>
          <td class="px-6 py-4">A set of rules allowing different applications to communicate with each other.</td>
        </tr>
        <tr class="bg-white">
          <td class="px-6 py-4 font-medium text-slate-900">JSON</td>
          <td class="px-6 py-4">JavaScript Object Notation</td>
          <td class="px-6 py-4">A lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. This is a very long description to demonstrate how the column width adapts to its content.</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

示例：`table-fixed`

使用 table-fixed，我们可以定义明确的列宽。现在，“Description”列中过长的内容被截断了（如果配置的话会换行），因为它无法扩展列的宽度。

<div class="p-8 bg-slate-50">
  <h3 class="text-xl font-semibold mb-4">Fixed Layout Table (`table-fixed`)</h3>
  <div class="shadow-md rounded-lg overflow-hidden">
    <table class="table-fixed w-full text-sm text-left text-slate-500">
      <thead class="text-xs text-slate-700 uppercase bg-slate-100">
        <tr>
          <th scope="col" class="px-6 py-3 w-[15%]">Acronym</th>
          <th scope="col" class="px-6 py-3 w-[30%]">Stands For</th>
          <th scope="col" class="px-6 py-3 w-[55%]">Description</th>
        </tr>
      </thead>
      <tbody class="divide-y">
        <tr class="bg-white">
          <td class="px-6 py-4 font-medium text-slate-900">API</td>
          <td class="px-6 py-4">Application Programming Interface</td>
          <td class="px-6 py-4">A set of rules allowing different applications to communicate with each other.</td>
        </tr>
        <tr class="bg-white">
          <td class="px-6 py-4 font-medium text-slate-900">JSON</td>
          <td class="px-6 py-4">JavaScript Object Notation</td>
          <td class="px-6 py-4 truncate">A lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. This is a very long description that will be truncated.</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

使表格响应式

表格在实现响应式布局方面是出了名的困难。一种常见且有效的最佳实践是将表格包裹在一个容器元素中，并让该容器在小屏幕上水平滚动。

<!-- 在小屏幕上，此容器将拥有一个水平滚动条 -->
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <table class="w-full text-sm text-left text-gray-500">
        <!-- ... your table head and body ... -->
    </table>
</div>