嘿，我完全懂你遇到的麻烦——现在表格设了100%宽度，内容一长就直接把表格撑得无限宽，完全不会自动换行。下面给你一套纯CSS的解决方案，不用碰任何JS或jQuery，完美匹配你的需求：

核心CSS代码 #

/* 调整表格基础布局逻辑 */
.table-adaptive {
  width: 100%; /* 保留你原本的100%宽度设置 */
  table-layout: auto; /* 让浏览器根据内容计算每列的最小必要宽度 */
  border-collapse: collapse; /* 可选，让边框合并更整洁 */
}

/* 关键：给单元格设置宽度上限与换行规则 */
.table-adaptive th,
.table-adaptive td {
  max-width: 220px; /* 这里替换成你想要的最大宽度，比如200px/300px */
  word-wrap: break-word; /* 让长单词或无空格内容强制换行 */
  white-space: pre-wrap; /* 保留内容原有换行，同时允许自动换行 */
  word-break: break-word; /* 兼容不同浏览器的换行逻辑 */
  padding: 8px 12px; /* 可选，增加内边距提升可读性 */
}

各属性作用详解 #

• table-layout: auto：这是表格默认的布局模式，但明确声明后，浏览器会智能计算每列的最小必要宽度，不会强制均分宽度，完美适配内容长短不一的列。
• max-width: 220px：给单元格设定宽度上限，当内容长度超过这个值时，自动触发换行，彻底避免表格被撑宽。
• word-wrap: break-word：专门处理长单词或无空格的连续内容（比如长URL、ID串），强制将其拆分成多行，不会让单个超长内容撑爆单元格。
• white-space: pre-wrap：既保留内容里的手动换行符，又允许浏览器自动换行，兼顾内容格式和自适应需求。
• word-break: break-word：补充兼容旧版浏览器的换行逻辑，确保在不同浏览器里表现一致。

特殊场景优化 #

如果表格里有特别极端的无空格长内容（比如一串几十位的编码），可以给这类单元格单独加更严格的换行规则：

.table-adaptive td.extra-long {
  word-break: break-all; /* 强制在任意字符处换行，彻底杜绝撑宽问题 */
}

使用方法 #

只需要给你的表格加上class="table-adaptive"，再调整max-width到你需要的数值，就能看到效果：

• 内容短的列会自动收缩到最小必要宽度
• 内容超过最大宽度的列会自动换行，表格整体始终保持100%宽度，不会无限撑开

内容的提问来源于stack exchange，提问作者Samuel Gfeller