是的，原生表格元素设为 display: block 会丢失表格盒模型行为；可行方案是保留 HTML 结构，用 SCSS 批量重置 display、添加 data-label 提示、调整盒模型与文字对齐，并封装为 @mixin 便于复用。
响应式表格在小屏下改用 display: block 布局时，table 元素本身不支持直接设为 block 且保持语义结构？
是的，<table>、<code><tr>、<code><td> 等原生表格元素在设为 <code>display: block 后会丢失默认的表格盒模型行为（比如自动等宽、垂直对齐），但又不能简单替换成 div——否则破坏可访问性（role="table" 不如原生语义）。真正可行的做法是：保留 HTML 结构，用 SCSS 控制各单元格在断点下「模拟」块级布局。
关键不是强行改 display，而是利用 SCSS 的嵌套和变量，批量重置子元素的 display 值，并配以 width、float 或 flex 补位：
-
th和td在移动端设为display: block，并加width: 100% -
tr改为display: block，取消默认的行内表格行为 - 给
td::before插入对应th的文本（需配合data-label属性或 SCSS 循环生成）
用 SCSS @each 和属性选择器自动生成响应式 data-label 提示
手动给每个 td 写 data-label 容易漏、难维护。SCSS 可以提前定义列名数组，再用 @each 生成对应样式规则，让小屏下每个单元格自动显示表头文字：
$columns: (name, email, role, status);
@each $col in $columns {
.responsive-table td[data-label="#{$col}"]::before {
content: "#{$col}: ";
font-weight: bold;
}
}
配合 HTML：<td data-label="email">user@example.com</td>。这样既不用 JS，也不依赖 JS 注入内容，纯 CSS 驱动，且支持屏幕阅读器读取 data-label（需额外加 aria-label 更稳妥）。
立即学习“前端免费学习笔记（深入）”；
注意：若列名含空格或特殊字符，SCSS 字符串拼接要转义；生产环境建议用 nth-child() + attr() 替代，避免大量 data-label 属性污染 DOM。
为什么直接写 @media (max-width: 768px) 切换 display 会导致布局错乱？
常见错误是只改了 table 和 tr 的 display，却忘了 th/td 的 vertical-align、padding、border 在块级下会堆叠失效。结果是文字挤在一起、边框重叠、行高塌陷。
必须同步处理三类属性：
- 盒模型：把
th/td的padding拆成上下方向（padding-top/padding-bottom），避免左右 padding 在块级下撑宽 - 边框：用
border-bottom替代border，模拟「每行一条底边」效果 - 文字对齐：移除
text-align: center，统一用text-align: left，防止块级后文字居中导致阅读困难
SCSS 中推荐用 @mixin responsive-table 封装整套规则，而不是零散写媒体查询——方便复用和主题切换。
display: table-cell 在 Flex/Grid 布局里还能用吗？
不能混用。一旦父容器设了 display: flex 或 display: grid，其子元素的 display: table-cell 会被忽略，浏览器按 flex item/grid item 规则渲染。这时候想保留表格语义，只能：
- 放弃
table-cell，改用flex: 1+min-width模拟等宽列 - 或在外层套一层
<div class="table-wrapper">，仅对它设响应式，内部 <code><table> 保持原生 display <p>更现实的做法是：PC 端用原生 <code>table，移动端用 SCSS 生成的「伪表格」布局（div+role="row"/"cell"），通过prefers-reduced-motion或screen reader检测做渐进增强——但这就超出纯 SCSS 范畴了。最常被忽略的一点：所有响应式表格的
font-size和line-height必须随断点缩放，否则小屏下文字挤成一团，比 display 切换问题更影响可用性。
