Tailwind CSS - 边框合并

Tailwind CSS：边框合并

Tailwind 的边框合并工具类控制表格中相邻单元格的边框如何渲染。你可以选择将它们合并成一个单独的边框，或保持它们相互分离。

边框合并类

这些工具类控制 border-collapse CSS 属性。

类	CSS 属性
border-collapse	border-collapse: collapse;
border-separate	border-collapse: separate;

功能解释

• border-collapse：这是现代数据表最常见的选择。它将相邻单元格的边框合并为一个共享边框，创建出简洁紧凑的外观。
• border-separate：此类别保持每个单元格的边框独立。使用此类别时，你还可以通过 border-spacing-* 工具类（例如 border-spacing-x-2、border-spacing-y-4）控制这些边框之间的空间。

示例：数据表的合并边框

使用 border-collapse 是创建简洁、现代数据表的理想选择。请注意单元格之间的边框如何无缝合并。

<div class="p-8 bg-gray-100 dark:bg-slate-900">
  <div class="overflow-x-auto shadow-md rounded-lg">
    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 border-collapse">
      <thead class="text-xs text-gray-700 uppercase bg-gray-200 dark:bg-slate-700 dark:text-gray-300">
        <tr>
          <th scope="col" class="px-6 py-3 border border-slate-300 dark:border-slate-600">Framework</th>
          <th scope="col" class="px-6 py-3 border border-slate-300 dark:border-slate-600">Primary Use</th>
        </tr>
      </thead>
      <tbody>
        <tr class="bg-white dark:bg-slate-800">
          <td class="px-6 py-4 border border-slate-300 dark:border-slate-600">React</td>
          <td class="px-6 py-4 border border-slate-300 dark:border-slate-600">Front-End UI Libraries</td>
        </tr>
        <tr class="bg-gray-50 dark:bg-slate-800/50">
          <td class="px-6 py-4 border border-slate-300 dark:border-slate-600">Node.js</td>
          <td class="px-6 py-4 border border-slate-300 dark:border-slate-600">Server-Side JavaScript</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

示例：带间距的分离边框

使用 border-separate 时，边框不会合并。这允许你使用 border-spacing-* 工具类在单元格之间引入间距，这对于为表格行创建卡片式布局很有用。

<div class="p-8 bg-gray-100 dark:bg-slate-900">
  <div class="overflow-x-auto">
    <table class="w-full border-separate border-spacing-y-2">
      <thead class="text-xs text-gray-700 uppercase dark:text-gray-300">
        <tr>
          <th scope="col" class="px-6 py-3 text-left">User</th>
          <th scope="col" class="px-6 py-3 text-left">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr class="bg-white dark:bg-slate-800 shadow-sm rounded-lg">
          <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">Alex Johnson</td>
          <td class="px-6 py-4 text-green-500">Active</td>
        </tr>
        <tr class="bg-white dark:bg-slate-800 shadow-sm rounded-lg">
          <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">Maria Garcia</td>
          <td class="px-6 py-4 text-red-500">Inactive</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>