Yeti 数据表格组件完全指南：零构建的 `table` 样式化方案

Yeti 数据表格组件完全指南零构建的table样式化方案【免费下载链接】yetiA CSS-first, native, zero-build layout and styling framework for web designers.项目地址: https://gitcode.com/gh_mirrors/fo/yeti导读Yeti 是一个以 CSS 为先、零构建的原生布局与样式框架其table组件专为行与列的数据设计直接为table元素就地添加样式通过data-*属性开关斑马纹、行悬停与单元格边框并让数字列靠右对齐、使用等宽数字对齐位数。本文以 docs/table.md 为主体结合 table.css、manifest.json 与浏览器测试 table.spec.js 的源码证据完整讲解该组件的使用方式、属性矩阵、无障碍要点、令牌定制与实现原理读完即可在页面中直接落地可访问、可缩放的表格。Example最简可用形态表格组件把样式类放在table元素本身styled in place不要求包裹层、不需要任何 JavaScript。官方示例见 example.htmltable classtable>.table [data-numeric] { text-align: end; font-variant-numeric: tabular-nums; }text-align: end让数字靠右RTL 下自动镜像font-variant-numeric: tabular-nums启用等宽数字字形从而让千分位、小数点逐列对齐。该行为被浏览器测试直接验证table.spec.js中断言#n1的text-align为end、font-variant-numeric为tabular-nums。宽表放入scroller表格始终是表格当表格宽于容器时不要试图压缩列而是把它放进横向滚动轨道div classscroller roleregion aria-labelQuarterly results tabindex0 table classtable>:root { --yeti-table-stripe: var(--yeti-color-primary-soft); --yeti-table-border: var(--yeti-color-border-strong); }内部令牌次要版本间可能变动--_yeti-size-text字号、--_yeti-size-space间距由data-size驱动不建议直接依赖。Accessibility无障碍要点文档在 table.md 与 manifest 的a11y.notes中给出两条硬性要求给表格命名使用caption或在该元素上加aria-label/aria-labelledby表头单元格携带scope列头用scopecol行首维度名用scoperow。最关键的设计决策是Yeti 永远不会在窄屏下把表格堆叠成卡片。因为堆叠会破坏屏幕阅读器赖以工作的行/列关系所以官方方案是套一个scroller并保持表格是表格——这正对应测试中对display: table的断言。scroller自身作为可交互滚动区域需要roleregion、aria-label与tabindex0详见 scroller.md且键盘可用方向键滚动轨道。测试验证与浏览器支持table.spec.jstest/browser/components/table.spec.js覆盖了组件的主要契约表头加粗且其下边框颜色异于普通行线data-striped下第 2 行与第 1 行背景不同第 3 行与第 1 行相同隔行规律正确data-hover悬停时行背景变化data-numeric的text-align: end与tabular-nums生效data-grid下每个单元格都有左边框且data-sizesm的padding-top小于mddata-grid下表头强规则仍然保留宽表在scroller内真实溢出并可滚动且元素保持display: table明/暗两种配色下文本对比度均通过 AA 级expectAA并通过 axe 无障碍扫描。浏览器支持方面组件无守卫地使用了 logical properties 与font-variant-numericsupports之后无需额外处理。该组件自 7.0.0 起可用纯 CSS 实现、无任何 JavaScriptjs: null。快速上手总结引入 src/yeti.css零构建直接link即可写一个语义完整的table classtable必须带tbody建议带caption与scope需要斑马纹加data-striped需要悬停高亮加data-hover需要全网格边框加data-grid数字列在表头与各单元格上标data-numeric表太宽时套div classscroller roleregion aria-label... tabindex0不要改表格结构想换肤就覆盖--yeti-table-stripe、--yeti-table-border、--yeti-color-border-strong三个令牌。【免费下载链接】yetiA CSS-first, native, zero-build layout and styling framework for web designers.项目地址: https://gitcode.com/gh_mirrors/fo/yeti创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考