响应式表格不应在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;
}注意：data-label 必须写在 HTML 的每个 <td> 上，否则伪元素没内容可读。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<h3>
<code>table--scrollable 容器必须带 white-space: nowrap
仅靠 overflow-x: auto 不够。如果单元格内文本换行或缩放，表格仍可能塌陷或错位。常见错误是忘记控制空白符行为：
-
.table--scrollable应作用于外层容器（<div>），而非 <code><table> 自身<li>容器需设 <code>overflow-x: auto和white-space: nowrap <table> 要设 <code>min-width（如min-width: 600px），防止被压缩到不可读- 避免在
td里用flex或grid—— 它们会干扰表格固有布局流
示例结构：
<div class="table--scrollable"> <table>...</table> </div>
CSS：
.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%)隐藏视觉，但不切断语义 - 若真要移除，应在 JS 层做数据过滤，而非纯 CSS 隐藏
尤其注意：表格的可访问性依赖完整的 th/td 结构。砍掉一列，scope 和 ARIA 关系就可能断裂。
BEM 在响应式表格里的真正价值，是让「滚动模式」和「卡片模式」变成可预测、可组合、可测试的状态开关，而不是替媒体查询背锅。断点逻辑永远在 CSS 里，BEM 只负责命名清晰、不耦合、不泄露实现细节。
