Toggle navigation
剑灵百科-剑灵wiki
查看“编辑指南-表格进阶教程”的源代码
←
编辑指南-表格进阶教程
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于这些用户组的用户执行:editor-team、
编辑(语义MediaWiki)
您可以查看和复制此页面的源代码。
===控制表格整体宽度=== <code>{|</code>后除了接<font color=green>class="类样式名"</font>,还可以接<font color=green>style="..."</font>定义整个表格的元素。 {| class="wikitable" style="width:100%" |- ! style="width:30%" | 演示内容 ! style="width:35%" | 源码 ! style="width:35%" | 实际效果 |- | 将表格的整体宽度占满整个空间 | <syntaxhighlight lang=css> {|class=wikitable style="width:100%" |橘子 |苹果 |- |面包||饼<!--如果想把表格内容写在一行里的话要使用 || 来分割单元格--> |- |奶油 |冰淇凌 |} </syntaxhighlight> | {|class=wikitable style="width:100%" |橘子 |苹果 |- |面包||饼<!--如果想把表格内容写在一行里的话要使用 || 来分割单元格--> |- |奶油 |冰淇凌 |} |} <p>这个"<font color=green>width:100%</font>"指表格的整体宽度占'''<font color=Magenta>上一级元素</font>'''宽度百分比。假如这个表格写在一个宽度只有70%的单元格或者<font color=Magenta><nowiki><div></nowiki></font>里例如:</p> {| class="wikitable" style="width:100%" |- ! style="width:30%" | 演示内容 ! style="width:35%" | 源码 ! style="width:35%" | 实际效果 |- | 外面的表格只占空间内的70%,<br>内部的表格占满整个空间(空隙是外部表格的内边距) | <syntaxhighlight lang=css> {|class=wikitable style="width:70%" |只有70%宽的表格 |- | {|class=wikitable style="width:100%" |- |即使是100%宽度 |} |} </syntaxhighlight> | {|class=wikitable style="width:70%" |只有70%宽的表格 |- | {|class=wikitable style="width:100%" |- |即使是100%宽度 |} |} |} {| class="wikitable" style="width:100%" |- ! style="width:30%" | 演示内容 ! style="width:35%" | 源码 ! style="width:35%" | 实际效果 |- | 使用<div>标签控制外部整宽为70%,<br>内部的表格则占满这70%的整个空间 | <syntaxhighlight lang=html> <div style="width:70%">只有70%宽的div {|class=wikitable style="width:100%" |- |即使是100%宽度 |} </div> </syntaxhighlight> | <div style="width:70%">只有70%宽的div {|class=wikitable style="width:100%" |- |即使是100%宽度 |} </div> |} 以上以百分比宽度来举例,因为百分比宽度兼容不同的设备更好一些,也可以写成<font color=green>'''100px'''</font>这种具体像素宽度,只不过在调整页面的时候会非常痛苦。
返回
编辑指南-表格进阶教程
。