大屏表格需用div包裹table实现平滑滚动，thead设sticky定位防错位，隐藏滚动条；避免内存泄漏须复用DOM节点、节流渲染；首行高亮需JS监听scroll动态调整位置。
数据大屏里的表格不是普通 <table> 直接塞进页面就能用的，滚动、高亮、实时刷新、列宽自适应、性能卡顿——这些才是真实痛点。直接上 CSS + JS 滚动方案最可控，别依赖可视化库的“表格组件”。
怎么让大屏表格支持平滑垂直滚动
原生 <table> 在固定高度容器里默认不滚动，overflow: auto 会破坏表头/表体对齐，尤其跨浏览器时边框错位严重。
- 必须用
<div>包裹<table>，给外层设height和overflow-y: scroll，内层<table>不设高度 -
<thead>要脱离文档流：对thead th加position: sticky; top: 0; background: #101a2c;（深色背景防滚动透底） - 禁用
border-collapse: collapse，改用border-collapse: separate+ 显式border，否则 sticky 表头滚动时边框会抖 - 滚动条要隐藏：外层加
scrollbar-width: none（Firefox）和::-webkit-scrollbar { display: none; }（Chrome/Edge）
滚动表格如何避免内存泄漏和卡顿
大屏常跑 7×24 小时，用 setInterval 不停 appendChild 或 innerHTML = ... 会导致 DOM 节点堆积、重排频繁、内存飙升。
- 只更新数据，不重建 DOM：用
document.querySelectorAll('tbody tr')批量取行，循环cells[i].textContent = newData[i] - 新数据超过 N 行（如 50）就删老数据：
tbody.firstChild.remove()，保持 DOM 节点数恒定 - 避免在滚动中触发重排：所有样式用 class 控制，不要读写
offsetHeight等 layout 属性 - 用
requestAnimationFrame节流渲染，比如每 60ms 最多更新一次视图
怎么实现“首行高亮+滚动跟随”效果
监控类大屏常需标出最新一条记录，且滚动时它要始终在顶部可见——这不是 CSS 能解决的，得靠 JS 绑定滚动事件。
立即学习“前端免费学习笔记（深入）”；
- 给最新一行加 class
latest-row，CSS 设background: linear-gradient(90deg, #00c9ff, #92fe9d); color: #000; - 监听外层容器
scroll事件，计算scrollTop和latestRow.offsetTop差值 - 当最新行即将滚出视口顶部（比如
offsetTop - scrollTop ），用 <code>element.scrollIntoView({ block: 'start', behavior: 'smooth' }) - 注意：不要在每次 scroll 触发时都调用
scrollIntoView，先用if判断是否真需要滚动，否则会打架
为什么 colspan/rowspan 在大屏表格里要慎用
合并单元格看着省事，但在滚动表格里极易引发错位、重绘异常，尤其配合 sticky 表头时，Chrome 和 Safari 渲染行为不一致。
- sticky 的
<th>遇到colspan="2"，第二列的边框可能消失或偏移 1px - 动态插入带
rowspan的行后，后续行的offsetTop计算失准，导致“滚动跟随”失效 - 替代方案：用 CSS Grid 模拟合并效果（
grid-column: 1 / -1），或拆成多个<td>+ 同背景色 + 隐藏中间 border - 真要合并，只在静态表头区域用，数据体一律禁用
大屏表格最易被忽略的是字体渲染一致性——不同设备的 font-smoothing、字号缩放、甚至 subpixel rendering 都会让对齐像素级偏移。上线前务必在目标屏幕实机连 HDMI 测试，别信开发机预览。
