Tailwind CSS实现表格 表头样式匹配设计稿问题咨询

两个问题的核心原因都是table默认布局属性和边框设置逻辑不对，按以下步骤修改即可：

• 边框和容器宽度不匹配：移除包裹table的外层div上的border-y border-me-gray-2类，给table加上border-collapse类启用边框合并模式，同时去掉table上的mx-auto类避免宽度偏移，此时table边框会自动和外层容器宽度完全对齐。
• 表头下方双分割线：可以直接用原生double边框实现，也可以用伪元素自定义线条粗细和间距，灵活度更高。
• 额外注意：不要直接给th单元格设置flex布局，会破坏table原生列宽计算规则，导致布局错位，需要flex对齐内容时在th内部嵌套一层元素设置即可。

核心修改后代码 #

<div class="pt-6 relative min-h-2xl">
  <!-- 移除了原外层div的border-y类 -->
  <div class="">
    <!-- 新增border-collapse类，移除mx-auto类 -->
    <table class='w-full rounded-lg bg-white divide-y divide-me-gray overflow-hidden border-collapse'>
      <thead class="bg-white">
      <!-- 表头行加顶部边框 -->
      <tr class="text-me-black text-left border-t border-me-gray-2">
        <th class="text-xl font-roboto font-bold text-me-black px-6 py-4">
          <!-- 嵌套span设置flex对齐，不直接给th加flex -->
          <span class="inline-flex items-center gap-1">
            Name
            <svg class="w-5 h-5 text-me-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </span>
        </th>
        <th class="text-xl font-roboto font-bold text-me-black px-6 py-4 w-44"> Date created </th>
      </tr>
      <!-- 空行实现双分割线，不需要双细线可以删掉这行 -->
      <tr class="border-b-2 border-double border-me-gray-2"></tr>
      </thead>
      <colgroup style="border: none;">
        <col class="w-64">
        <col>
      </colgroup>
      <tbody class="divide-y divide-me-gray">
      <tr>
        <td class="px-6 py-4">
          <div class="flex items-center space-x-3">
            <div>
              <p class="font-bold text-me-black my-2"> Protocol1 </p>
              <p class="text-me-gray text-sm font-roboto"> [Normal text] Suspendisse nec libero id ligula mollis ullamcorper quis vitae dui. Mauris vel. Neque porro quisquam est qui dolorem ipsum quia dolor sit...
              </p>
            </div>
          </div>
        </td>
        <td class="px-6 py-4">
          <p class="text-xl font-roboto font-medium text-black">1.3.2019 - v6</p>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

自定义双分割线样式（可选） #

如果默认的double边框粗细、间距不符合设计稿像素要求，可以删掉上面代码里的空分割线tr，把下面的CSS加到你的自定义样式里，自由调整线条参数：

thead {
  position: relative;
}
thead::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  /* 调整色值、像素位置即可修改线条粗细和间距 */
  background: linear-gradient(to bottom, #929497 1px, transparent 1px, transparent 2px, #929497 2px);
}

内容的提问来源于stack exchange，提问作者LaProblem123