use*_*767 7 css mediawiki html-table
如何有效地居中对齐某些列而左对齐其他列？
我想做这样的事情。
-------------------------
| A |B |
-------------------------
| C |D |
-------------------------
此代码使所有列居中。
{| class="wikitable" style="text-align: center;"
|-
! Header 1
! Header 2
|-
| A
| B
|-
| C
| D
|}
而且我知道以下代码可以满足我的需求。
{| class="wikitable"
|-
! Header 1
! Header 2
|-
| style="text-align: center;" | A
| B
|-
| style="text-align: center;" | C
| D
|}
但是因为我需要制作一个很长的桌子，所以这很乏味。
是否有任何代码可以使用非常简单的一行代码仅将第一列居中对齐？
接受的答案虽然正确，但通常实现起来可能很乏味，因为您需要为所需的列位置和文本对齐的每个组合创建一个不同的 CSS 类。
另一种一次性方法是将 CSS 直接嵌入到 wiki 页面中。在仅由受信任用户编辑的 wiki 上，您可以启用$wgRawHtml. 在其他情况下，您可以使用扩展名，例如Extension:CSS. 如果您有多个表，则可以使用#id选择器将样式限制到每个表。
<html> <!-- assumes $wgRawHtml = true; safer alternatives exist -->
<style>
table#accounts tr td:nth-child(3),
table#accounts tr td:nth-child(4)
{
text-align: right;
}
</style>
</html>
{| class="wikitable" id="accounts"
! Account Number !! Account Name !! Source Balance !! Target Balance
|-
| 1234 || UK Savings || 402.00 || 323.21
|-
| 5432 || Car Fund || 12,943.00 || 23,433.21
|-
| 6789 || Other Expenses || 4.21 || 6.21
|}
编辑：再想一想，采用全局方法确实会导致 wiki 页面中的语法更清晰，特别是如果您有许多需要对齐列的表。我为页面中的每个对齐方式创建了 CSS 类MediaWiki:Common.css：
table.col-1-center td:nth-child(1) { text-align: center; }
table.col-2-center td:nth-child(2) { text-align: center; }
table.col-3-center td:nth-child(3) { text-align: center; }
table.col-4-center td:nth-child(4) { text-align: center; }
table.col-5-center td:nth-child(5) { text-align: center; }
table.col-6-center td:nth-child(6) { text-align: center; }
table.col-7-center td:nth-child(7) { text-align: center; }
table.col-8-center td:nth-child(8) { text-align: center; }
table.col-9-center td:nth-child(9) { text-align: center; }
table.col-1-right td:nth-child(1) { text-align: right; }
table.col-2-right td:nth-child(2) { text-align: right; }
table.col-3-right td:nth-child(3) { text-align: right; }
table.col-4-right td:nth-child(4) { text-align: right; }
table.col-5-right td:nth-child(5) { text-align: right; }
table.col-6-right td:nth-child(6) { text-align: right; }
table.col-7-right td:nth-child(7) { text-align: right; }
table.col-8-right td:nth-child(8) { text-align: right; }
table.col-9-right td:nth-child(9) { text-align: right; }
然后，在您的 wiki 页面中，您可以简单地引用 CSS 类：
{| class="wikitable col-3-right col-4-right"
! Account Number !! Account Name !! Source Balance !! Target Balance
|-
| 1234 || UK Savings || 402.00 || 323.21
|-
| 5432 || Car Fund || 12,943.00 || 23,433.21
|-
| 6789 || Other Expenses || 4.21 || 6.21
|}
这种方法的另一个优点是您不需要启用$wgRawHtml或安装扩展。
除非您在 中禁用它LocalSettings.php，否则您可以使用该页MediaWiki:Common.css面向所有页面添加额外的样式表。只需使用纯 CSS 执行您需要的操作即可。例如：
.myTableClass td {
text-align: left;
}
.myTableClass td:first-child {
text-align: center;
}
...然后将该类添加到您的表中
{| class="wikitable myTableClass"
|-
| A
| B
|-
| C
| D
|}