为何Chrome与Firefox中mat-table单元格文本溢出处理表现不同？

我在Chrome和Firefox中运行相同的Angular（mat-table）HTML代码时，Chrome的表格单元格会正常显示横向滚动条，但Firefox里出现了文本重叠的情况。

相关代码如下：

<td
  style="
    min-width: 160px;
    max-width: 400px;
    text-overflow: clip;
    overflow: hidden;
    overflow-x: scroll;
    white-space: nowrap;
  "
  mat-cell
  *matCellDef="let element"
>

各浏览器显示效果 #

Chrome 表现 #

Firefox 表现 #

修复方案 #

Firefox 对表格单元格（<td>）的overflow属性处理逻辑与Chrome不同，默认会优先适配表格布局，导致overflow-x: scroll不生效。可以通过以下两种方式解决：

1. 将单元格设置为块级容器
   给<td>添加display: block或display: inline-block，让浏览器识别单元格为可滚动的容器：

   <td
     style="
       min-width: 160px;
       max-width: 400px;
       text-overflow: clip;
       overflow: hidden;
       overflow-x: scroll;
       white-space: nowrap;
       display: block;
     "
     mat-cell
     *matCellDef="let element"
   >
   

2. 设置表格为固定布局
   在表格上添加table-layout: fixed，强制表格列遵循指定的宽度，避免单元格被内容拉伸：

   table {
     table-layout: fixed;
     width: 100%;
   }
   

采用上述任一方法后，Firefox中的单元格将和Chrome一致，显示横向滚动条，避免文本重叠。

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