Tailwind CSS 表格完整参考

Tailwind CSS 是一个CSS框架，它专注于可定制性和灵活性。您可以使用 Tailwind CSS 来构建完美的 Web 应用程序。其中很重要的一部分是样式表格。

基本样式表格

Tailwind 提供了一组常用的样式来描绘普通表格。

| 类名 | 描述 |
| --- | --- |
| table-auto | 让表格自适应宽度 |
| table-fixed | 让表格定宽 |
| text-left | 让表格左对齐 |
| text-center | 让表格居中 |
| text-right | 让表格右对齐 |
| border-collapse | 让表格单元格边框合并 |
| border-separate | 让表格单元格边框分离 |
| divide-y | 让表格单元格垂直方向分隔 |
| divide-x | 让表格单元格水平方向分隔 |

使用这些类名，您可以创建一个简单的表格。

<table class="table-auto border-collapse">
  <thead>
    <tr class="text-left">
      <th>代码</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>tailwindcss.min.css</td>
      <td>已压缩的 CSS 文件</td>
    </tr>
    <tr>
      <td>tailwindcss.css</td>
      <td>未压缩的 CSS 文件</td>
    </tr>
  </tbody>
</table>

带样式表格

您可以使用这些 Tailwind 类来自定义表格。

| 类名 | 描述 |
| --- | --- |
| bg-gray-100 | 让表格背景颜色为灰色 |
| text-gray-700 | 让表格文字颜色为灰色 |
| font-medium | 让表格文字加粗 |
| hover:bg-gray-200 | 让表格鼠标悬停时的背景颜色为灰色 |
| hover:text-gray-800 | 让表格鼠标悬停时的文字颜色为深灰色 |
| odd:bg-gray-50 | 让表格奇数行背景颜色为浅灰色 |
| even:bg-gray-100 | 让表格偶数行背景颜色为灰色 |
| border | 让表格单元格显示边框 |
| border-l | 让表格单元格左侧显示边框 |
| border-t | 让表格单元格上侧显示边框 |
| border-r | 让表格单元格右侧显示边框 |
| border-b | 让表格单元格下侧显示边框 |
| border-gray-700 | 让边框颜色为深灰色 |
| hover:border-gray-800 | 让鼠标悬停时边框颜色为更深的灰色 |

根据需要，您可以组合这些类来创建您自己的自定义表格。

<table class="table-fixed w-full">
  <thead>
    <tr>
      <th class="bg-gray-100 border text-left px-4 py-2">#</th>
      <th class="bg-gray-100 border text-left px-4 py-2">文件名</th>
      <th class="bg-gray-100 border text-left px-4 py-2">大小</th>
      <th class="bg-gray-100 border text-left px-4 py-2">类型</th>
    </tr>
  </thead>
  <tbody>
    <tr class="hover:bg-gray-200">
      <td class="border-l border-gray-700 px-4 py-2">1</td>
      <td class="border-l border-gray-700 px-4 py-2">file_one.txt</td>
      <td class="border-l border-gray-700 px-4 py-2">4 KB</td>
      <td class="border-l border-gray-700 px-4 py-2">TXT</td>
    </tr>
    <tr class="hover:bg-gray-200">
      <td class="border-l border-gray-700 px-4 py-2">2</td>
      <td class="border-l border-gray-700 px-4 py-2">file_two.png</td>
      <td class="border-l border-gray-700 px-4 py-2">2 MB</td>
      <td class="border-l border-gray-700 px-4 py-2">PNG</td>
    </tr>
    <tr class="hover:bg-gray-200">
      <td class="border-l border-gray-700 px-4 py-2">3</td>
      <td class="border-l border-gray-700 px-4 py-2">file_three.jpg</td>
      <td class="border-l border-gray-700 px-4 py-2">8 KB</td>
      <td class="border-l border-gray-700 px-4 py-2">JPG</td>
    </tr>
  </tbody>
</table>

使用这些示例，您可以创建专业的表格，使您的 Web 应用程序更加吸引人。