如何根据内容调整表格单元格宽度？解决长文本列被挤压变形问题

当表格内承载长文本的列被挤压变形、需要让列宽和列内内容完全适配时，可通过以下操作调整：

• 解除固定布局的强制约束
  列被无理由挤压的最常见原因，是表格被设置了table-layout: fixed的固定布局模式。这种模式下浏览器完全不考虑单元格内的实际内容长度，只会按照预设的列宽值硬分配空间，自然会把长文本挤成换行错乱的状态。把表格的布局属性改成table-layout: auto后，浏览器会自动逐格计算内容长度，给每一列分配和内容匹配的宽度，不会再硬挤压长文本列。
• 给长文本列补全换行规则
  切换为自动布局之后，也可能遇到新问题：如果单元格里是没有自然断点的连续长文本（比如一长串没有空格的英文、超长链接），浏览器会把列宽撑到突破页面边界，把整个表格顶出可视区。这时候只要给长文本所在的单元格加两个样式规则即可：
  • word-break: break-all：允许长文本在需要的时候从任意字符位置合理换行，不会硬撑着列宽不折行
  • 给长文本列设置不超过页面可用宽度的max-width上限，从规则上限制列宽的最大值，避免整页布局被撑坏
• 给列宽加匹配内容的参考基准
  如果自动布局计算出的列宽和预期效果有偏差，可以在表格的colgroup标签内，给每一列设置一个和自身内容长度匹配的参考宽度。在自动布局模式下，浏览器会优先参考这个基准值分配宽度，同时自动适配更长的内容、把过宽的冗余列收窄，不会出现强制挤压的问题。

注意：不要给所有列设置强制的百分比宽度值，否则浏览器会重新回到平均分配列宽的逻辑，长文本被挤压的异常状态会再次出现。

内容的提问来源于stack exchange，提问作者Toma Tomov