Firefox表格表头占半高问题求助：与Chrome表现不一致

你编写的表格代码在Firefox中表头会占据表格一半高度，但Chrome中表头仅适配自身内容高度，要实现Chrome的效果，可通过以下方式修复：

• 给<thead>添加height: fit-content样式，强制表头仅占用内容所需高度；
• 给<tbody>添加height: 100%样式，让表格主体占据剩余的全部高度。

修改后的完整代码如下：

<div style="height: 90vh"> 
  <div style="position: relative; width: 100%; height: 100%"> 
    <table style="height: 100%">
      <thead style="height: fit-content">
        <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
      </thead>
      <tbody style="height: 100%">
        <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
      </tbody>
    </table>
  </div>
</div>

原因说明 #

Firefox在表格设置height: 100%时，默认会将<thead>和<tbody>的高度均分。通过给<thead>指定fit-content，就能让它只适配自身内容高度，剩余空间全部交给<tbody>，和Chrome的默认行为对齐。

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