基于表头值类型动态调整表格列宽的条件CSS方案问询

方案一：纯CSS实现（依赖现代浏览器特性） #

利用CSS :has() 选择器通过列数判断量表类型（数值型量表列数远多于标签型），直接为不同类型的网格首列设置宽度：

/* 基础布局：让表格自适应容器宽度 */
.survey-grid {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

/* 数值型量表（列数≥12，含首列+10个评分列+「不知道」列）：首列占比35% */
.survey-grid:has(td:nth-child(12)) td:first-child,
.survey-grid:has(th:nth-child(12)) th:first-child {
  width: 35%;
  min-width: 200px;
  white-space: normal;
  padding: 8px;
}

/* 标签型量表（列数≤8，含首列+3-5个标签列+「不知道」列）：首列占比45% */
.survey-grid:not(:has(td:nth-child(9))) td:first-child,
.survey-grid:not(:has(th:nth-child(9))) th:first-child {
  width: 45%;
  min-width: 250px;
  white-space: normal;
  padding: 8px;
}

/* 所有评分列统一最小宽度，避免挤压 */
.survey-grid td:not(:first-child),
.survey-grid th:not(:first-child) {
  min-width: 60px;
  text-align: center;
  padding: 8px;
}

注意：

• 替换 .survey-grid 为调查引擎实际生成的表格类名（可通过浏览器开发者工具查看）
• :has() 选择器需要Chrome 105+/Firefox 121+/Safari 15.4+，如果要兼容旧浏览器，优先用下面的CSS+JS方案

方案二：CSS+JS实现（兼容性更强，判断更精准） #

通过JS遍历表格，根据表头内容判断量表类型（数值型表头为数字，标签型为文字），给表格添加自定义类，再用CSS针对性设置宽度：

第一步：添加全局JS #

document.addEventListener('DOMContentLoaded', () => {
  // 遍历所有网格问卷表格
  document.querySelectorAll('.survey-grid').forEach(table => {
    const headerCells = table.querySelectorAll('th:not(:first-child)');
    let isNumericScale = false;
    
    // 判断：若超过8个表头单元格为数字，判定为数值型量表
    const numericCellCount = Array.from(headerCells).filter(cell => {
      return !isNaN(Number(cell.textContent.trim()));
    }).length;
    
    // 双重判断：列数≥10也判定为数值型（兼容表头非纯数字的情况）
    if (numericCellCount > 8 || headerCells.length >= 10) {
      isNumericScale = true;
    }
    
    // 添加自定义类
    table.classList.add(isNumericScale ? 'numeric-scale' : 'label-scale');
    
    // 检查是否存在「不知道」列，添加对应类
    const lastHeader = table.querySelector('th:last-child');
    if (lastHeader && lastHeader.textContent.trim() === '不知道') {
      table.classList.add('has-unknown');
    }
  });
});

第二步：添加对应CSS #

.survey-grid {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

/* 数值型量表首列样式 */
.survey-grid.numeric-scale td:first-child,
.survey-grid.numeric-scale th:first-child {
  width: 35%;
  min-width: 200px;
  white-space: normal;
  padding: 8px;
}

/* 标签型量表首列样式 */
.survey-grid.label-scale td:first-child,
.survey-grid.label-scale th:first-child {
  width: 45%;
  min-width: 250px;
  white-space: normal;
  padding: 8px;
}

/* 含「不知道」列时微调首列宽度 */
.survey-grid.has-unknown td:first-child,
.survey-grid.has-unknown th:first-child {
  width: calc(var(--first-col-width, 40%) - 5%);
}

/* 评分列统一样式 */
.survey-grid td:not(:first-child),
.survey-grid th:not(:first-child) {
  min-width: 60px;
  text-align: center;
  padding: 8px;
}

优化提示：

• 可根据实际量表调整JS中的判断阈值（比如数值型表头数字的数量、列数）
• 如果引擎用<div>而非<table>实现网格，只需把JS和CSS中的选择器替换为对应的容器类和子元素选择器

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