Table 表格
Table 给原生 <table> 加上样式,用来展示简单的表格内容。子元素就是普通的 caption、colgroup、thead、tbody、tfoot、tr、th 和 td,所以 Markdown 渲染器只需把 table 映射成 Table,其余元素原样输出。它没有列 / 数据 API,也没有排序和选择。
演示
基础用法
thead 里的表头单元格使用表头样式;caption 在表格上方给出标题。
尺寸
边框
bordered={false} 去掉外框。没有外框时,bottomBordered={false} 再去掉最后一行下面的分割线。
列分割线
singleLine 默认开启,只分隔行;singleLine={false} 同时分隔列。
单列
singleColumn 去掉表体各行之间的分割线。
斑马纹
对齐
单元格的 align 属性(GFM 对 :---、:---:、---: 输出的就是它)和行内 text-align 都会覆盖表格默认的起始对齐。
宽表格
表格比容器宽时,在外层容器(一个 ScrollArea)里横向滚动,不会撑出页面。滚动时外层容器是一个 region,名字来自 scrollRegionLabel,并且可以用 Tab 聚焦,键盘用户能用方向键滚动。表体单元格里的文字会换行,表头保持单行。放在 flex 或 grid 子项里时,给该子项加 min-width: 0,否则它会被表格撑宽,而不是让表格滚动。
Markdown
Markdown 渲染器为一张 GFM 表格输出的元素,其中 table 映射成了 Table。行内代码、链接和强调沿用外围正文的样式。
Table Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
bordered | boolean | true | 显示外框。未设置时取 ConfigProvider 的 bordered。 | 未发布 |
bottomBordered | boolean | true | 保留最后一行下面的分割线。bordered 时无效:外框已经收住了表格。 | 未发布 |
scrollRegionLabel | string | 语言包:可滚动的表格 | 外层容器滚动时的无障碍名称。 | 未发布 |
singleColumn | boolean | false | 去掉行之间的分割线。 | 未发布 |
singleLine | boolean | true | 去掉列之间的分割线。 | 未发布 |
size | small | medium | large | medium | 单元格内边距和字号。 | 未发布 |
striped | boolean | false | 表体隔行加底色。 | 未发布 |
其余 props、className、style 和 ref 都落在 <table> 元素上。外层容器的类名是 r-table-wrapper,Markdown 的块间距之类请加在它上面。
表格内部直接用原生的 thead、tr、th 等元素。