日志页面应使用语义化的article而非table，因日志是时间序列流而非二维表格；需用CSS Grid实现响应式时间线布局，并通过data属性和JS支持高亮、折叠与搜索。
日志页面不是排版问题，是信息密度与可扫描性之间的平衡问题。直接用 table 堆字段、靠 float 拉侧边栏、或硬套 Flexbox 默认行为，都会在真实日志量（比如 500+ 行）下迅速失控——文字挤成一团、时间戳对不齐、ERROR 关键字被折叠、移动端根本没法查。
日志条目必须用 article + time 而非 tr/td
表格语义只适用于「行列交叉有业务含义」的数据，比如用户列表、价格对比表。日志是时间序列流，每条是独立事件，不是二维坐标点。用 table 会导致：
- 屏幕阅读器把
tr当作“一行数据”读，但日志里level、message、trace_id并不构成逻辑列关系 - 响应式断点失效：
table-layout: fixed在小屏上要么横向滚动，要么内容被截断 - 无法按时间线自然延展：日志要支持“加载更多”或“滚动到底部自动追加”，
tbody动态插入tr容易触发重排卡顿
正确做法是每个日志项用 article 包裹，关键字段用语义化标签：
<article class="log-entry">
<time datetime="2026-10-20T01:58:22Z">01:58:22</time>
<span class="log-level error">ERROR</span>
<h3 class="log-title">Database connection timeout</h3>
<p class="log-message">Failed to acquire connection after 3 retries...</p>
<details class="log-details">
<summary>Stack trace</summary>
<pre>at Pool.acquire (...)</pre>
</details>
</article>时间线布局靠 CSS Grid 而非 float 或 inline-block
日志的视觉重心是时间先后，不是左右对齐。用 float 或 display: inline-block 会强制让所有字段“并排占位”，结果就是小屏上 message 被砍掉一半，trace_id 换行错位。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
Grid 可以明确声明主轴为列，并控制各字段宽度弹性：
.log-entry {
display: grid;
grid-template-columns:
[time] minmax(60px, 80px)
[level] minmax(60px, 100px)
[title] 1fr
[message] 2fr;
gap: 0.5rem;
align-items: start;
}-
minmax()确保时间/等级列不会被压缩到看不见，又不会在大屏上浪费空间 -
1fr/2fr让标题和消息按比例伸缩，避免固定像素导致换行失控 - 移动端只需加一条
@media (max-width: 768px) { .log-entry { grid-template-columns: 1fr; } }，整条日志就竖排，无需 JS 重写结构
高亮、折叠、搜索必须绑定 DOM 结构，不能靠纯 CSS 类名切换
很多模板用 .log-level.error { background: #fee } 就完事，但真实场景中：
- ERROR 可能出现在
message文本里，而不是独立字段 - 用户点击某条日志想展开详情，但
details是动态插入的，CSS 伪类:has()兼容性差（Safari 15.4+ 才支持） - 搜索关键词高亮需要 JS 遍历文本节点，不是加个
.highlight就能生效
所以结构上必须预留钩子：
- 每条
article加data-timestamp和data-level属性，供 JS 过滤和排序 -
details必须包裹完整原始日志对象（JSON 字符串或 data-* 存储），避免展开时再去请求后端 - 关键词高亮用
document.createElement('mark')替换文本节点，而不是用innerHTML += '<mark>xxx</mark>'（会破坏事件监听器）
真正难的不是怎么画格子，而是承认日志不是表格——它是一条流动的时间线，每条记录自带上下文、可交互、需筛选。一旦用错容器，后面所有样式、JS、响应式都是在给错误打补丁。
