首页
表格 Table
table-toggle 斑马格

表格 · table-toggle 斑马格

table-toggle 带边框斑马格：整表 1px 外框，表头主色 32% 底色，偶数行主色 12% 浅底，hover 22% 高亮。

表格家族索引 base simple toggle stretch line kuoqiui kuoqiui-head kuoqiui-pager kuoqiui-checkbox sticky cell controller pager print

本页内容斑马格行高亮

斑马格

相邻行交替浅色块，单元格 0.25em 紧凑内距：

编号	商品	价格	状态
1	斑马格示例	99.00	上架
2	偶数行浅底	128.00	上架
3	奇数行白底	66.00	下架

<table class="table table-toggle"> <thead><tr><th>编号</th><th>商品</th></tr></thead> <tbody><tr><td>1</td><td>斑马格示例</td></tr></tbody> </table>

行高亮

hover / active 时整行 22% 主色高亮，表头带左侧细分隔线、主色 32% 打底：

仓库	地址	操作
华东仓	上海市徐汇区	编辑
华南仓	广州市天河区	编辑

<table class="table table-toggle"> <tbody> <tr><td>华东仓</td><td>上海市徐汇区</td><td><span class="label label-canclick">编辑</span></td></tr> </tbody> </table>

toggle / stretch 变体内置分页（table-pager）样式，见 table-pager 内置分页。

上一张 table-simple 简洁表格

下一张 table-stretch 自适应宽

KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI · 返回首页