使用React-Table+Tailwind CSS时Safari不识别thead高度的解决方法

方法1：把高度转移到内部tr并控制th的内边距 #

Safari对thead直接设置height的支持存在兼容性问题，它更依赖内部元素的高度来计算thead的整体高度。试试把高度设置在thead里的tr上，同时调整th的padding避免默认值撑开高度：

<thead className="bg-[#E5EDFF] border-b-[1px] border-b-[#D2DFFF]">
  <tr className="h-[43px]">
    <th className="py-0 px-[16px]">你的表头内容</th>
    {/* 其他表头单元格 */}
  </tr>
</thead>

这样tr的固定高度会强制thead保持43px，去掉th的上下padding（py-0）可以避免额外高度。

方法2：给表格设置固定布局并明确thead的显示类型 #

如果方法1没效果，给表格加上固定布局样式，同时强制thead的display属性，确保Safari正确解析：
先定义自定义样式（可以用Tailwind的@layer或者全局CSS）：

@layer utilities {
  .table-fixed-layout {
    table-layout: fixed;
  }
  .thead-force-display {
    display: table-header-group;
    height: 43px;
  }
}

然后在组件中使用：

<table className="table-fixed-layout">
  <thead className="bg-[#E5EDFF] border-b-[1px] border-b-[#D2DFFF] thead-force-display">
    {/* 表头内容 */}
  </thead>
  {/* 表格主体 */}
</table>

table-layout: fixed会让表格列宽固定，防止内容溢出影响thead高度，display: table-header-group确保Safari不会把thead当成普通块级元素处理。

方法3：取消可能存在的flex布局干扰 #

React-Table有时会给表格元素添加flex相关样式，这在Safari下会打乱height的生效逻辑。如果你的tr被设置了flex，可以给tr加上flex-none类来取消伸缩特性：

<tr className="h-[43px] flex-none">
  {/* 表头单元格 */}
</tr>

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