如何消除表格首个td元素后其余td间的巨大间距？

参考截图 #

• Figma设计：
• 当前效果：
• td元素状态：

问题分析 #

出现间距过大的核心原因：

• 表格默认采用table-layout: auto布局，会自动根据内容和容器拉伸单元格宽度
• 给tr设置max-w-[1160px]无效，表格布局规则中table元素的宽度控制优先级更高
• 未明确指定后续td的宽度，导致剩余空间被自动分配给这些td，产生巨大间距

解决方案 #

1. 给外层table设置固定布局和最大宽度 #

将表格布局改为table-fixed，同时设置最大宽度，让单元格宽度由手动控制：

<table className="max-w-[1160px] table-fixed w-full">
  <!-- 你的表格内容 -->
</table>

2. 移除tr的max-w样式 #

tr的max-w-[1160px]在表格布局中不生效，直接删除：

<tr key={`detail-${groupIndex}-${detailIndex}`} className="min-h-[70px] items-center border-b border-[#FFFFFF1F]">

3. 明确控制td的宽度 #

• 第一个td：设置为w-auto（自适应内容宽度），避免被压缩
• 后续td：设置固定宽度（根据Figma设计调整，示例用w-[100px]），并添加shrink-0防止被拉伸

修改后的detail行td代码：

<td className="w-auto flex items-center gap-x-2 py-4 px-[12px] font-inter-tight font-semibold text-[16px] leading-[18.4px] text-white">
  {detail.header}
  <Image src={QuestionIcon} alt="question-icon" width={18} height={18} />
</td>
<td className="p-2 w-[100px] shrink-0 font-inter-tight font-semibold text-[16px] leading-[18.4px] text-[#FFFFFF80]">
  {typeof detail.freeValue === "boolean" ? (
    detail.freeValue ? (
      <div className="flex items-center justify-center w-[22px] h-[22px] rounded-[100px] p-1.5 bg-[#9D6CFF]">
        <Image src={TickIcon} alt="tick-icon" />
      </div>
    ) : (
      <div className="flex items-center justify-center w-[22px] h-[22px]">
        -
      </div>
    )
  ) : (
    detail.freeValue
  )}
</td>

4. 可选：调整内容对齐方式 #

如果后续td的内容需要居中，直接给td添加text-center或flex justify-center即可，不会再产生多余间距（因为宽度已固定）。

效果说明 #

设置table-fixed后，表格会按照指定的td宽度分配空间，不会自动拉伸剩余单元格，完美匹配Figma的紧凑间距设计。

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