响应式表格

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

示例

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

性别

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

身高

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

体重 / 体形

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

种族

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

头发

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

眼睛

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

特征

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

男性

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

70英寸

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

苗条

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

高加索人

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

黑色

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

棕色 / 星形瞳孔

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

性格友好

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

女性

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

61英寸

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

瘦削

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

东亚人

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

黑色

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

灰绿色

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

衣着华丽

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:responsive-tables-source）

+ 点击这里显示以上示例的代码- 隐藏代码

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

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

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
性别
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
身高
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
体重 / 体形
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
种族
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
头发
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
眼睛
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
特征
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

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

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

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=性别 ]]
男性
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=身高 ]]
70英寸
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=体重 / 体形 ]]
苗条
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=种族 ]]
高加索人
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=头发 ]]
黑色
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=眼睛 ]]
棕色 / 星形瞳孔
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=特征 ]]
性格友好
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

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

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

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=性别 ]]
女性
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=身高 ]]
61英寸
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=体重 / 体形 ]]
瘦削
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=种族 ]]
东亚人
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=头发 ]]
黑色
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=眼睛 ]]
灰绿色
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

[[include :scp-wiki:component:responsive-tables-source |cell-start= --] |cell-header=特征 ]]
衣着华丽
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

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

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

重要信息

一张表格的组成部分

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

样版
页面版本：⁨0⁩, 最后编辑于: ⁨2019/7/6 13:00:40⁩ (⁨⁨2629⁩ 日前⁩), 现时评分: 2
历史 附件 + 选项