跳转到内容

TableScroll 表格滚动

让宽表格在正文栏里横向滚动,不把页面撑宽。

文章里的每个表格都会用到它。读者要逐行比较的数据才用表格;步骤或选项用列表。

照常写 Markdown 表格。网站把这个系统的组件传给文章,文章里的每个表格都会放进打开了 wrap 的 TableScroll:文章里的表格多是句子,换行更好读。每列至少 8rem,还放不下才横向滚动。

| 字段 | 类型 |
| --- | --- |
| title | string |

圆角细线边框;表头一行是卡片底色和大写的小标签;行与行之间是浅色细线。第一列用墨色,作为这一行的名字。

属性 取值
caption 表格下方的一行说明,也是滚动区域的名字
wrap 允许单元格换行,每列最窄 8rem,再放不下就横向滚动。默认不换行:横向滚动的一列比换了行的一列好读
stickyHeader 表格内容滚动时固定表头
tone cream(默认)或 dark

滚动区域可以用键盘聚焦,用方向键滚动;它是一个有名字的区域,名字是说明文字,没有说明时是 “Table”。

TableScroll.astro,以及替换文章里表格的 MarkdownTable.astro。props 和交付包一样。

CodeBlock 代码块,同样是横向滚动、不换行。