表格列样式需用 col/colgroup 定义结构，配合 bem 类名 table__cell--status 等实现语义化控制；避免嵌套命名与视觉修饰符，用属性选择器和容器修饰符处理特殊状态与响应式。
表格列样式无法单独控制？用 col 和 colgroup 先占位
纯 CSS 没法直接给「第 3 列所有 td」加边框或背景，因为表格行（tr）是 DOM 主干，列只是视觉概念。强行用 tr > td:nth-child(3) 看似可行，但一旦某行有 colspan，序号就全乱了。
正确做法是用语义化标签提前定义列结构：
-
col标签本身不可见，但能承载样式，支持width、background、border（部分浏览器）、visibility - BEM 中建议把列类名和表头/单元格类名解耦：
col-id是列维度，table__header--id和table__cell--id是内容维度 - 注意：Firefox 对
col的background支持不稳定，必要时得 fallback 到td.table__cell--id
BEM 类名怎么写才不冗余？避免 table__header__id 这种嵌套
BEM 不是要求无限嵌套，而是强调「块」的独立性。表格是一个块（table），它的表头、单元格、列都是该块的元素，不是子块。
- ✅ 正确：
table__header、table__header--id、table__cell--status - ❌ 错误：
table__header__id（这是 BEM 的常见误解，__只用于「块→元素」，不用于「元素→子元素」） - 修饰符（
--）应反映业务含义，比如--error、--pending，而不是视觉描述如--blue-bg - 如果某列需要统一控制（比如所有
status列的单元格文字居中），就靠table__cell--status+text-align: center，别依赖结构层级
表头与单元格样式不一致？用属性选择器补足语义缺失
HTML 表格里 th 和 td 语义不同，但默认样式差异小，BEM 类名又不能覆盖所有场景——比如「带排序图标的表头」或「带 tooltip 的状态单元格」。
- 用
[data-sortable]或[data-status]这类属性增强语义，比硬编码类名更灵活 - 例如：
th[data-sortable].table__header--id::after控制排序箭头，不影响其他table__header--id - 避免在 CSS 里写
th.table__header和td.table__cell分开声明，容易漏掉响应式或状态变体；统一用.table__header/.table__cell，再靠属性或修饰符细分 - 注意：IE11 不支持属性选择器中的某些值类型（如空格分隔多值），若需兼容，改用
data-status="active pending"→[data-status~="active"]
响应式表格列隐藏后，BEM 类还有效吗？
用 display: none 隐藏整列（比如移动端隐藏「操作」列），col 和对应单元格的 BEM 类依然存在，但样式失效。问题常出在「隐藏逻辑」和「类名职责」混淆。
- 不要靠 JS 动态增删
table__cell--action类来控制显隐，而应在容器上加修饰符：table--mobile，然后写.table--mobile .table__cell--action { display: none; } - 如果列内容需降级为行内展示（如「标题：值」格式），BEM 不适用——那是新组件（
table-row-summary），不是原表格的变体 - 所有列相关的媒体查询，优先写在
col或修饰符上，而非每个table__cell--xxx单独写一遍
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
