响应式表格

注意


此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。

未经组件作者或工作人员允许，请勿修改此页的内容。

在 Sigma 9（Wikidot的基准主题）与黑标（BHL）上均可使用。

示例

性别
身高
体重 / 体形
种族
头发
眼睛
特征
男性
70英寸
苗条
高加索人
黑色
棕色 / 星形瞳孔
性格友好
女性
61英寸
瘦削
东亚人
黑色
灰绿色
衣着华丽
+ 点击这里显示以上示例的代码

重要信息

一张表格的组成部分

TableComponents.jpg

一张表格包含一行标题行header row，随后是若干内容行content row。这些行都是由若干单元格cell所组成。

如何使用

我先提前道个歉，这里有如此……多的东西……以后我或许会进行简化。不过现在，请依照以下步骤一步一步地来。

  • 步骤 1：表格的开始
  • 步骤 2：标题行的开始
    • 步骤 2.1：添加标题单元格
      需要时重复
    • 步骤 2.2：标题行的结束
  • 步骤 3：内容行的开始
    • 步骤 3.1：添加内容单元格
      需要时重复
    • 步骤 3.2：内容行的结束
  • 需要时重复 3 — 3.2
  • 步骤 4：表格的结束

步骤 1：表格的开始

这一步骤只需进行一次。

在你的代码开头添加如下语法：

[[include :scp-wiki:component:responsive-tables-source |responsive-table-start= --] ]]

步骤 2：标题行的开始

当你需要多个标题行时，重复这一步骤。

添加如下语法：

[[include :scp-wiki:component:responsive-tables-source |header-start= --] ]]

步骤 2.1：添加标题单元格

当你需要在标题行中添加多个单元格时，重复这一步骤。

为你的标题的每一个单元格添加如下语法：

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
标题单元格的内容
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

步骤 2.2：标题行的结束

根据你所添加的标题行的数目，重复这一步骤。

在你的标题单元格之后添加如下语法：

[[include :scp-wiki:component:responsive-tables-source |header-end= --] ]]

步骤 3：内容行的开始

当你需要多个内容行时，重复这一步骤。

在你的内容行的起始处添加如下语法：

[[include :scp-wiki:component:responsive-tables-source |row-start= --] ]]

步骤 3.1：添加内容单元格

当你需要在内容行中添加多个单元格时，重复这一步骤。这里的数目应与标题单元格相同。

重要提醒：每一个单元格， |cell-header= 必须与相应列的标题相同。因此，在如上的示例中，第二列为“身高”，所以每一个单元格都必须在语法中添加 |cell-header=身高。否则单元格在移动设备上无法显示标题。

为每一个单元格添加如下语法：

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=单元格标题 ]]
单元格内容
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

步骤 3.2：内容行的结束

根据你所添加的内容行的数目，重复这一步骤。

在你的单元格之后添加如下语法：

[[include :scp-wiki:component:responsive-tables-source |row-end= --] ]]

步骤 4：表格的结束

这一步骤只需进行一次。

在你的代码末尾添加如下语法：

[[include :scp-wiki:component:responsive-tables-source |responsive-table-end= --] ]]

过度设计、过多编码？或许如此。但它能用！:p

样版
页面版本: 1, 最后编辑于: 09 Aug 2021 10:58
编辑 评分 (+2) 标签 讨论 (0) 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License