求助：纯CSS实现表格首列自适应内容宽度且最大不超表格50%

Got it，咱们用纯CSS就能完美实现你要的效果——让第一列自适应最长标签的宽度，但一旦标签内容过长，就把列宽限制在表格总宽度的50%以内。下面是具体的实现方案：

核心CSS代码 #

table {
  padding-bottom: 20px;
  width: 100%;
  table-layout: auto; /* 保留表格自动布局，让浏览器根据内容计算列宽 */
}

td {
  border: 1px solid;
}

.first-column {
  min-width: fit-content; /* 列宽至少适配最长的标签内容，不会因短标签变窄 */
  max-width: 50%; /* 强制列宽不超过表格总宽度的50% */
  white-space: normal; /* 长文本自动换行，避免撑破布局 */
}

.second-column {
  width: 1%; /* 让第二列尽可能收缩，优先满足第一列的自适应需求 */
  white-space: nowrap; /* 确保输入框不会被挤压变形 */
}

代码逻辑说明 #

• table-layout: auto：这是表格的默认布局模式，浏览器会先计算所有单元格的内容宽度，再确定最终列宽，刚好能实现第一列"自适应最长标签"的需求。
• .first-column的min-width: fit-content：保证列宽不会因为其他短标签而被压缩，至少能放下最长的那个标签；搭配max-width: 50%，一旦标签内容超长，列宽就被限制在表格的一半，文本自动换行，不会侵占第二列的空间。
• .second-column的width: 1%+white-space: nowrap：让第二列尽可能利用剩余空间，同时确保输入框不会被挤压换行，始终保持完整的可用状态。

把这段CSS替换你原来的样式，就能看到预期效果了：短标签时第一列自适应宽度，超长标签时自动限制在50%宽度内换行，完全符合你的要求~

内容的提问来源于stack exchange，提问作者Арсен Мирзаян