响应式表格

我和我的小伙伴们都惊呆了!!

此页为于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

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License