TailwindCSS表格列在Chrome中宽度异常重叠问题求助

核心问题 #

你的表格在Chrome里列重叠、Firefox正常显示，本质是Chrome和Firefox对table-fixed布局的解析逻辑差异：

• 你给表格加了table-fixed和w-full，当表格总宽度超过父容器时，Chrome会强制压缩列宽来适配容器宽度，直接忽略min-w-48这类最小宽度限制，导致列重叠。
• Firefox则会优先尊重min-w-*的设置，让表格溢出父容器，通过父容器的overflow-scroll实现横向滚动，所以显示正常。

另外，代码里的tbody class="overflow-y-scroll"是无效的——tbody元素本身不支持单独设置垂直滚动，这个属性不会起作用。

修复方法 #

方法1：改用自动表格布局（推荐） #

去掉表格的table-fixed类，使用默认的table-auto布局，浏览器会根据列的min-w-*和内容自动计算宽度，同时允许表格溢出容器，触发父容器的滚动：

<table class="w-full"> <!-- 移除table-fixed -->

方法2：保留固定布局，强制表格最小宽度 #

如果必须使用table-fixed，需要给表格设置总最小宽度，确保所有列的最小宽度总和不被压缩。比如你的第一列是min-w-24，剩下39列是min-w-48，总最小宽度为24 + 39*48 = 1908px，给表格添加min-w-[1908px]：

<table class="table-fixed w-full min-w-[1908px]">

这样Chrome会保留列的最小宽度，不会压缩重叠，表格会溢出父容器，横向滚动正常。

额外优化：表头固定滚动（可选） #

如果需要表头固定、tbody滚动，需要把thead和tbody放在不同容器中：

<div class="overflow-scroll mt-5 rounded bg-white border border-gray-200">
  <!-- 表头容器 -->
  <div class="sticky top-0 bg-white">
    <table class="w-full">
      <thead class="text-md uppercase">
        <!-- 表头内容 -->
      </thead>
    </table>
  </div>
  <!-- 表体容器，设置固定高度 -->
  <div class="max-h-[600px] overflow-y-auto">
    <table class="w-full">
      <tbody>
        <!-- 表体内容 -->
      </tbody>
    </table>
  </div>
</div>

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