TableScroll 表格滚动
让宽表格在正文栏里横向滚动,不把页面撑宽。
文章里的每个表格都会用到它。读者要逐行比较的数据才用表格;步骤或选项用列表。
文章里怎么写
Section titled “文章里怎么写”照常写 Markdown 表格。网站把这个系统的组件传给文章,文章里的每个表格都会放进打开了 wrap 的 TableScroll:文章里的表格多是句子,换行更好读。每列至少 8rem,还放不下才横向滚动。
| 字段 | 类型 || --- | --- || title | string |圆角细线边框;表头一行是卡片底色和大写的小标签;行与行之间是浅色细线。第一列用墨色,作为这一行的名字。
| 属性 | 取值 |
|---|---|
caption |
表格下方的一行说明,也是滚动区域的名字 |
wrap |
允许单元格换行,每列最窄 8rem,再放不下就横向滚动。默认不换行:横向滚动的一列比换了行的一列好读 |
stickyHeader |
表格内容滚动时固定表头 |
tone |
cream(默认)或 dark |
滚动区域可以用键盘聚焦,用方向键滚动;它是一个有名字的区域,名字是说明文字,没有说明时是 “Table”。
TableScroll.astro,以及替换文章里表格的 MarkdownTable.astro。props 和交付包一样。
CodeBlock 代码块,同样是横向滚动、不换行。