列表页应据数据行列关系选或：有固定行列结构（如用户列表）用并规范/；无固定列数（如标签云）则用配合display: flex/grid，确保语义正确、响应式适配与可访问性。
列表页不是“把数据塞进表格就行”，而是要兼顾可读性、操作密度、响应式适配和语义正确性——错用 或非法嵌套 用 还是 管理系统列表页的核心判断点：字段之间是否存在「行-列」对应关系（比如“用户ID｜姓名｜状态｜操作”这种固定字段对齐结构）。
- 有明确行列语义 → 必须用
： 定义表头， 包数据， 和 严格区分；否则排序按钮、列宽拖拽、导出 CSV 等功能会因 DOM 结构错乱而失灵
- 无固定列数或字段动态增减（如“标签云”“权限项勾选组”）→ 用
display: flex 或 display: grid，但必须确保每个
- 别用
模拟表格：虽然能画出格子，但缺失 scope、 aria-label 等可访问性属性，键盘导航无法按列移动，视障用户根本不知道当前在哪一列
display: grid 布局等宽列时，为什么列宽总不一致？
常见现象：设置了 grid-template-columns: repeat(4, 1fr)，但第四列被内容撑开，前三列变窄。这不是 bug，是 min-content 优先级高于 1fr 的正常行为。
- 加
minmax(0, 1fr) 替代 1fr：grid-template-columns: repeat(4, minmax(0, 1fr))，强制忽略内容最小宽度
- 长文本溢出必须截断：
overflow: hidden; text-overflow: ellipsis; white-space: nowrap，否则 grid 会重新计算轨道尺寸
- 表头和数据行的
grid-column 必须对齐：如果某行少一个字段，用空 colspan —— 才支持 colspan，grid 需显式声明跨列
- IE11 不支持
minmax()，需降级为 grid-template-columns: 25% 25% 25% 25% 并配合 word-break: break-all
响应式折叠列，CSS 怎么写才不破坏排序功能？
移动端隐藏部分列（如“创建时间”“操作人”），不是简单 display: none，否则 JavaScript 排序插件会找不到对应 DOM 节点，导致点击表头无反应。
htmlppt.skill
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
下载
- 用
visibility: collapse 替代 display: none： 和 仍保留在 DOM 中，仅视觉隐藏，排序逻辑可正常定位
- 给要隐藏的列加 data 属性：
，然后媒体查询中统一控制：@media (max-width: 768px) { [data-mobile-hide] { visibility: collapse; } }
- 操作列（带按钮/下拉菜单）必须保留，哪怕只留一个「…」图标：
visibility: visible 强制显示，避免用户在手机上无法执行关键动作
- 别用
transform: scale(0) 或 opacity: 0 隐藏列：元素仍在文档流中占位，会撑高行高，且焦点仍可进入，影响键盘操作
为什么 flex 后，鼠标悬停效果失效？
典型错误：给 display: flex; flex-wrap: wrap，再给 :hover，结果只有第一行能触发，换行后的项 hover 无反应。
- 根本原因是
flex-wrap: wrap 后，换行项的 z-index 默认为 auto，被上一行内容遮挡；加 position: relative 和 z-index: 1 到
-
padding 足够（至少 8px），否则触摸设备点击区域太小，iOS Safari 会忽略点击
- 横向滚动列表（如时间轴）禁用
flex-wrap，改用 white-space: nowrap + overflow-x: auto，否则 flex 换行会破坏时间线连续性
- 别给
height 限制高度：flex 项高度由内容决定，硬设 height 会导致内容被裁切，且 :hover 区域不完整
最常被忽略的一点：管理系统列表页的「空状态」不是加个 暂无数据 或同为 tbody tr:last-child）意外漏掉空状态样式。
|
| |
| |
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
