如何实现表格部分单元格适配内容、部分拉伸且支持溢出省略？

1. fixed表格布局下能不能让单元格适配内容宽度？ #

不行。table-layout:fixed的核心逻辑是优先用表格或列的预设宽度分配空间，根本不会自动根据单元格内容计算调整列宽。一开这个属性，列宽就钉死了，没法同时保留fixed布局和自动适配内容宽度的特性。

2. 静态页面用JS先获取宽度再设置的方案可行吗？ #

完全可行，这是静态场景下同时实现“前三列适配内容+第四列溢出省略”的常用办法，具体步骤如下：

• 先别开table-layout:fixed，让表格用默认的auto布局，这时候前三列会自动撑到刚好适配内容的宽度；
• 用JS把前三列（.first、.second、.third）的实际宽度读出来；
• 给表格加上table-layout:fixed属性，再把刚才读到的宽度分别设给前三列；
• 最后给第四列设置width: calc(100% - 前三列宽度总和)（或者直接让它占剩余空间），再保证内部div的overflow:hidden; white-space:nowrap; text-overflow:ellipsis样式写对就行。

给个简单的代码例子：

// 等页面加载完再执行
window.addEventListener('load', () => {
  const table = document.querySelector('table');
  const cols = document.querySelectorAll('.first, .second, .third');
  
  // 先存下各列适配内容后的宽度
  const colWidths = Array.from(cols).map(col => col.offsetWidth);
  
  // 切换到fixed布局并设置列宽
  table.style.tableLayout = 'fixed';
  cols.forEach((col, index) => {
    col.style.width = `${colWidths[index]}px`;
  });
});

要注意的地方：

• 必须等页面所有内容（包括图片这类会影响宽度的元素）加载完再跑JS，不然拿到的宽度不准；
• 如果表格内容是动态生成的，得等内容渲染完再执行这段代码；
• 第四列可以直接加width: 100%，让它自动填剩下的空间，配合内部div的省略样式就能正常生效。

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