响应式表格不应在BEM修饰符中硬编码断点，修饰符只表达语义状态（如--scrollable、--card-layout），断点逻辑必须由@media规则控制，确保正交性、可复用性和可访问性。
响应式表格不该用 BEM 修饰符硬编码断点
BEM 修饰符（如 --mobile 或 --sm）不是为媒体查询断点服务的。它描述的是组件的**语义状态**，比如 --striped、--compact、--loading，而不是屏幕尺寸。把 table--responsive@sm 这类写法塞进类名里，会破坏 BEM 的正交性，也导致样式无法复用或测试。
真正该做的，是把响应式逻辑留在 @media 规则里，BEM 只提供干净的钩子：
-
table--scrollable表示“支持横向滚动”，对应容器包裹 +overflow-x: auto -
table--card-layout表示“启用卡片式渲染”，由媒体查询在小屏下激活 - 所有状态类都应独立、可叠加，不依赖断点值命名
如何用 @media 驱动 table--card-layout
卡片式布局本质是改变 tr 和 td 的显示方式，同时利用 data-label 保留字段语义。关键不是改 HTML 结构，而是用 CSS 重定义视觉流：
- 默认状态下，
table、tr、td按原生表格渲染 - 在
@media (max-width: 768px)内，对.table--card-layout启用以下规则：
/* 小屏卡片化 */
.table--card-layout {
display: block;
}
.table--card-layout tbody tr {
display: block;
border-bottom: 1px solid #eee;
margin-bottom: 0.5em;
}
.table--card-layout tbody td {
display: block;
padding: 0.25em 0;
}
.table--card-layout tbody td::before {
content: attr(data-label) ": ";
font-weight: bold;
}
注意： 仅靠 示例结构： CSS： 有些开发者用 更稳妥的做法： 尤其注意：表格的可访问性依赖完整的 BEM 在响应式表格里的真正价值，是让「滚动模式」和「卡片模式」变成可预测、可组合、可测试的状态开关，而不是替媒体查询背锅。断点逻辑永远在 CSS 里，BEM 只负责命名清晰、不耦合、不泄露实现细节。data-label 必须写在 HTML 的每个 上，否则伪元素没内容可读。
table--scrollable 容器必须带 white-space: nowrap
overflow-x: auto 不够。如果单元格内文本换行或缩放，表格仍可能塌陷或错位。常见错误是忘记控制空白符行为：.table--scrollable 应作用于外层容器（ 自身
overflow-x: auto 和 white-space: nowrap
要设
min-width（如 min-width: 600px），防止被压缩到不可读td 里用 flex 或 grid —— 它们会干扰表格固有布局流<div class="table--scrollable">
<table>...</table>
</div>
.table--scrollable {
overflow-x: auto;
white-space: nowrap;
}
.table--scrollable table {
min-width: 600px;
width: 100%;
border-collapse: collapse;
}
移动端隐藏列时别用
display: none 直接删数据.col-hidden-on-mobile { display: none; } 隐藏次要列，但这是危险操作 —— 屏幕阅读器和搜索引擎可能跳过这些内容，造成信息丢失。
visibility: hidden + position: absolute 把列移出视口，但仍保留在 DOM 流中clip-path: inset(100%) 隐藏视觉，但不切断语义th/td 结构。砍掉一列，scope 和 ARIA 关系就可能断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
