表格
table-wrap 负责窄屏横向滚动；行 hover 高亮，ops 列右对齐放 btn-sm。增强：--zebra 斑马纹、caption 标题、--sticky-col 首列粘滞、行状态色（row-success/warning/error）、展开行（row-expand）。
| 名称 | 区域 | 状态 | 实例数 | 操作 |
|---|---|---|---|---|
| gateway | us-east-1 | 运行中 | 4 | |
| accounts | us-west-2 | 运行中 | 2 | |
| billing | eu-west-1 | 降级 | 2 | |
| archive | ap-northeast-1 | 已停止 | 0 | |
| search | us-east-1 | 运行中 | 6 | |
| 合计 | 14 | |||
<div class="table-wrap table-wrap--bordered"> <table class="admin-table admin-table--zebra"> <caption class="table-caption">服务实例清单 · 2026 年 7 月</caption> <thead> <tr><th>名称</th><th>区域</th><th>状态</th><th class="num">实例数</th><th class="ops">操作</th></tr> </thead> <tbody> <tr><td>gateway</td><td>us-east-1</td><td><span class="pill ok">运行中</span></td><td class="num">4</td><td class="ops"><button class="btn btn-sm">编辑</button><button class="btn btn-sm">停用</button></td></tr> <tr><td>accounts</td><td>us-west-2</td><td><span class="pill ok">运行中</span></td><td class="num">2</td><td class="ops"><button class="btn btn-sm">编辑</button><button class="btn btn-sm">停用</button></td></tr> <tr class="row-warning"><td>billing</td><td>eu-west-1</td><td><span class="pill warn">降级</span></td><td class="num">2</td><td class="ops"><button class="btn btn-sm">编辑</button><button class="btn btn-sm">停用</button></td></tr> <tr class="row-error"><td>archive</td><td>ap-northeast-1</td><td><span class="pill bad">已停止</span></td><td class="num">0</td><td class="ops"><button class="btn btn-sm">编辑</button><button class="btn btn-sm">启用</button></td></tr> <tr><td>search</td><td>us-east-1</td><td><span class="pill ok">运行中</span></td><td class="num">6</td><td class="ops"><button class="btn btn-sm">编辑</button><button class="btn btn-sm">停用</button></td></tr> </tbody> <tfoot> <tr><td colspan="3">合计</td><td class="num">14</td><td></td></tr> </tfoot> </table></div>安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import '@icen.ai/ui/kit/table';也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add table
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/table.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
<div class="table-wrap [--bordered]"> <table class="admin-table [--zebra] [--compact|--dense] [--sticky-col]"> <caption class="table-caption">标题</caption> <thead><tr><th>名称</th><th class="ops">操作</th></tr></thead> <tbody> <tr class="row-link [.is-selected] [.row-success|.row-warning|.row-error]"> <td>gateway</td> <td class="ops"><button class="btn btn-sm">编辑</button></td> </tr> </tbody> <tfoot><tr><td>合计</td></tr></tfoot> </table></div>