可折叠表格
mw-collapsible类可使任意元素可折叠，但使表格可折叠尤为简单。将mw-collapsible类添加到表格中会自动定位切换按钮，并选择要折叠的部分。
一种常见用途是制作一个可折叠的布局表格，它始终显示简介或摘要，但隐藏其余内容，不让用户直接看到。简介或摘要位于第一行，内容位于后续行，使用“展开”按钮即可轻松访问其内容。
在下面的示例中，wikitable类的使用仅仅是为了外观，它不是让mw-collapsible起作用所必须的。
| 输入代码 |
输出内容
|
{| role="presentation" class="wikitable mw-collapsible"
| <strong>千字文</strong>
|-
| 天地玄黄，宇宙洪荒。日月盈昃，辰宿列张。
|}
|
|
更复杂的数据表格也可以折叠。
| 输入代码 |
输出内容
|
{| class="wikitable mw-collapsible"
|+ class="nowrap" | 冬季奥林匹克运动会
|-
|
! scope="col" | 国家／地区
! scope="col" | 城市
|-
! scope="row" | 1994年
| 挪威 || 利勒哈默尔
|-
! scope="row" | 1998年
| 日本 || 长野
|}
|
冬季奥林匹克运动会
|
|
国家／地区
|
城市
|
| 1994年
|
挪威 |
利勒哈默尔
|
| 1998年
|
日本 |
长野
|
|
默认折叠
仅使用mw-collapsible类会使元素默认展开，但读者可以将其折叠。也可以通过随mw-collapsible添加其他类使元素默认折叠并可选择展开。有以下方法可以执行此操作，具体取决于用户希望元素折叠的情况。但是，根据MOS:DONTHIDE，内容不应默认折叠。
"mw-collapsed"
添加类值mw-collapsed将使元素始终处于初始折叠状态，无论其周围发生什么，这是最简单的方法。使用上述示例：
| 输入代码 |
输出内容
|
{| role="presentation" class="wikitable mw-collapsible mw-collapsed"
| <strong>千字文</strong>
|-
| 天地玄黄，宇宙洪荒。日月盈昃，辰宿列张。
|}
|
|
{| class="wikitable mw-collapsible mw-collapsed"
|+ class="nowrap" | 冬季奥林匹克运动会
|-
|
! scope="col" | 国家／地区
! scope="col" | 城市
|-
! scope="row" | 1994年
| 挪威 || 利勒哈默尔
|-
! scope="row" | 1998年
| 日本 || 长野
|}
|
冬季奥林匹克运动会
|
|
国家／地区
|
城市
|
| 1994年
|
挪威 |
利勒哈默尔
|
| 1998年
|
日本 |
长野
|
|
"autocollapse"
使用此技术将导致页面重排或跳转，通常情况下应避免。
如果页面上有一个以上可折叠元素，则添加类值autocollapse会使元素折叠。所以，下面的示例会折叠，因为该页面包含许多可折叠元素。
| 输入代码 |
输出内容
|
{| role="presentation" class="wikitable mw-collapsible autocollapse"
| <strong>千字文</strong>
|-
| 天地玄黄，宇宙洪荒。日月盈昃，辰宿列张。
|}
|
|
"innercollapse"和"outercollapse"
使用此技术将导致页面重排或跳转，通常情况下应避免。
使用这对类，可以使元素仅在包含在特定的外部元素中时才默认折叠。如果一个具有mw-collapsible和innercollapse类的元素包含在具有outercollapse类的元素中，则该元素会默认折叠；反之，则默认不会折叠该元素。这主要用于模板中，因为模板是嵌入包含的。
| 输入代码 |
输出内容
|
{| role="presentation" class="wikitable mw-collapsible innercollapse"
| 此<code>innercollapse</code>元素
|-
| 默认'''未折叠'''
|}
<div class="wikitable outercollapse" style="padding:1em; background:#ccc;">
这是一个具有<code>outercollapse</code>类的元素
{| role="presentation" class="wikitable mw-collapsible innercollapse"
| 此<code>innercollapse</code>元素
|-
| 默认'''折叠'''
|}
</div>
|
|
其他说明
带标题的表格
没有标题的表格将折叠到第一行。有标题的表格将折叠到其标题，没有行，所以没有宽度。使用class="nowrap"或{{nowrap}}可防止标题在表格折叠时被挤压到垂直列中。
| 输入代码
|
输出内容
|
{|class="wikitable sortable mw-collapsible"
|+ class="nowrap" | 有点长的表格标题
! 姓名 !! 分数
|-
| 张三 || 59
|-
| 李四 || 72
|}
|
有点长的表格标题
| 姓名 |
分数
|
| 张三 |
59
|
| 李四 |
72
|
|
下面的示例使用{{nowrap}}并以末尾括号作为换行点，<style=max-width:Xem;将不起作用。
| 输入代码
|
输出内容
|
{|class="wikitable sortable mw-collapsible"
|+ {{nowrap|较长的表格标题需要换行}}适用于移动设备
! 姓名 !! 分数
|-
| 张三 || 59
|-
| 李四 || 72
|}
|
较长的表格标题需要换行适用于移动设备
| 姓名 |
分数
|
| 张三 |
59
|
| 李四 |
72
|
|
可排序表格
可折叠表格可以毫无困难地与可排序表格功能结合使用。但是，由于展开／折叠按钮位于mw-collapsible第一行最右侧的单元格中，如果单元格不够宽，其定位可能看起来有点奇怪：
| 输入代码
|
输出内容
|
{|class="wikitable mw-collapsible sortable" style="width:5em"
<!--表格宽度太窄，这是有意而为之-->
|-
! 姓名 !! 分数
|-
| 张三 || 59
|-
| 李四 || 72
|}
|
|
一个可用的替代方案是在表格上方添加标题，参见下面的示例：
| 输入代码
|
输出内容
|
{|class="wikitable sortable mw-collapsible"
|+ class="nowrap" | 标题
! 姓名 !! 分数
|-
| 张三 || 59
|-
| 李四 || 72
|}
|
|
技术限制
- 此功能要求最终用户的浏览器启用JavaScript。如果禁用JavaScript，则默认行为是显示内容。
参见
外部链接
