跳到正文

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

名称类型默认值说明版本
borderedbooleantrue显示外框。未设置时取 ConfigProvider 的 bordered。未发布
bottomBorderedbooleantrue保留最后一行下面的分割线。bordered 时无效:外框已经收住了表格。未发布
scrollRegionLabelstring语言包:可滚动的表格外层容器滚动时的无障碍名称。未发布
singleColumnbooleanfalse去掉行之间的分割线。未发布
singleLinebooleantrue去掉列之间的分割线。未发布
sizesmall | medium | largemedium单元格内边距和字号。未发布
stripedbooleanfalse表体隔行加底色。未发布

其余 props、className、style 和 ref 都落在 <table> 元素上。外层容器的类名是 r-table-wrapper,Markdown 的块间距之类请加在它上面。

表格内部直接用原生的 thead、tr、th 等元素。