Menu
How can I efficiently center-align some columns while left-align others?
I want to do something like this.
-------------------------
| A |B |
-------------------------
| C |D |
-------------------------
This code makes all columns centered.
{| class="wikitable" style="text-align: center;"
|-
! Header 1
! Header 2
|-
| A
| B
|-
| C
| D
|}
And I know the following code does what I want.
{| class="wikitable"
|-
! Header 1
! Header 2
|-
| style="text-align: center;" | A
| B
|-
| style="text-align: center;" | C
| D
|}
But since I need to make a quite lenghty table, this is tedious.
Is there any code that will center-align only the 1st column using a very simple one line of code?
863
Unless you disabled it in LocalSettings.php, you can use the page MediaWiki:Common.css to add extra stylesheets to all pages. Just do what you need there, using plain CSS. E.g:
.myTableClass td {
text-align: left;
}
.myTableClass td:first-child {
text-align: center;
}
...and then add that class to your tables
{| class="wikitable myTableClass"
|-
| A
| B
|-
| C
| D
|}
The accepted answer, while correct, can be tedious to implement generally, as you need to create a distinct CSS class for every combination of column position and text alignment that you need.
An alternative approach for one-offs is to embed CSS directly into the wiki page. On wikis that are only edited by trusted users, you can enable $wgRawHtml. On others, you can use an extension such as Extension:CSS. If you have multiple tables, you can restrict the styling to each table by using #id selectors.
<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
|}
Edit: On second thoughts, going with a global approach does result in cleaner syntax within the wiki pages, especially if you have many tables with columns to align. I've created CSS classes for each alignment in the MediaWiki:Common.css page:
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; }
Then, within your wiki pages, you can simply reference the CSS class:
{| 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
|}
The added advantage of this approach is that you don't need to enable $wgRawHtml or install extensions.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
