To contact staff directly or to report bugs, please use Special:Contact.
Is it possible to define different styles for each table column without adding every cell to a style class?
Example:
| column 1 head | column 2 head |
|---|---|
| column 1 row 1 | column 2 row 1 |
| column 1 row 2 | column 2 row 2 |
An easy solution is
{| class="weas-el-table-example"
|-
! column 1 head
! column 2 head
|-
| class="table-left-column" | column 1 row 1
| class="table-right-column" | column 2 row 1
|-
| class="table-left-column" | column 1 row 2
| class="table-right-column" | column 2 row 2
|}
and defining the colors in the used style classes.
But is it possible to define this table design using only a single class for the <table> tag? Like this:
{| class="weas-el-table-example"
! column 1 head
! column 2 head
|-
| column 1 row 1
| column 2 row 1
|-
| column 1 row 2
| column 2 row 2
|}
Thanks in advance. --Weas-El ✉ 22:10, September 27, 2011 (UTC)
- Yes, this is possible by using the nth-child pseudo-class. So for your example
table.weas-el-table-example td:nth-child(odd) {
background-color: yellow;
}
table.weas-el-table-example td:nth-child(even) {
background-color: red;
}
- should do the job. — Sovq 05:09, September 28, 2011 (UTC)
Table Links color
I have a question on this topic: how can I set the text color of a table including links? Because for the links I have to manually set the color of each of them like:
{| border="1" style="background:black; color:yellow;"
! column 1 head
! column 2 head
|-
| column 1 row 1
| column 2 row 1
|-
| [[Forum:Support Requests|<span style="color:yellow;">column 1 link</span>]]
| [[Forum:Support Requests|<span style="color:yellow;">column 1 link</span>]]
|}
| column 1 head | column 2 head |
|---|---|
| column 1 row 1 | column 2 row 1 |
| column 1 link | column 1 link |
Is there a way to set it directly one time from the header style? I tried adding !important but it doesn't work. leviathan_89 13:58, 28 September, 2011 (UTC)
{| class="mytable"
| yellow text
| [[green link]]
|}
- with CSS:
.mytable a {
color:green !important;
}
.mytable {
color:yellow;
}
Sorry, but I don't think that would work, simply because we have tons of tables with different colorschemes and we set the colorscheme through a template, this way we have to edit only the template to affect every object which use that colorscheme. If I have to set a class for every tables, than it's faster set the colors manually, also I don't think I can use wiki text and template in the CSS.
I mean we do somethink like this:
{| border="1" style="background:{{COLORSCHEME}}; color:{{COLORSCHEME}};"
! column 1 head
! column 2 head
|-
| column 1 row 1
| column 2 row 1
|-
| [[Forum:Support Requests|<span style="color:{{COLORSCHEME}};">column 1 link</span>]]
| [[Forum:Support Requests|<span style="color:{{COLORSCHEME}};">column 1 link</span>]]
|}
Though a little more complicated... leviathan_89 15:30, 28 September, 2011 (UTC)
- f you don't want to add a specific CSS class to all the tables where you want to modify the link color, then you can be more general about the selector, i.e.
table td a {
color:yellow !important;
}
- which will change the link colors for ALL tables on your wiki. You can also be more specific by adding a other selectors to specify which tables you want to colorize. There needs to be a 'hook' for them though - something that distinguishes them from other tables.
- Generally, using templates just to add styling causes more server strain than just defining it through the wiki style sheets, so the solution Weas-El suggested is in my opinion the better one. — Sovq 16:41, September 28, 2011 (UTC)
If you want an idea how we use the colorschems, see here. We use them for infoboxes, template and other things. Well I guess there isn't any other solution, thank you. leviathan_89 16:48, 28 September, 2011 (UTC)
- 104 templates just to provide color schemes!?!?!?!? That's crazy! They all have almost the same content and they could easily be put in a single template with a switch.
- Another approach is to use a generic class and a specific class. In the generic class you define things that are common to most tables (or whatever element you are styling), things like margins and borders. In the specific class you define things like colors, boldness, italics, etc...
- You'd use
- If you want the color scheme to come from a template you can use
and in CSS define a section called table-name_of_scheme .- The big difference between using global CSS and templates is that normal users can create and edit templates but not the global CSS.
- If you want the color scheme to come from a template you can use