Problem: My table code isn’t being displayed correctly 100% of the time by mediawiki.

Question

0

Asked: June 7, 20262026-06-07T06:09:33+00:00 2026-06-07T06:09:33+00:00

Problem: My table code isn’t being displayed correctly 100% of the time by mediawiki.

0

Problem: My table code isn’t being displayed correctly 100% of the time by mediawiki. It seems as though it’s incorrectly “inheriting” certain colors from “parent” tables from which they’re placed inside. I’m hoping I can simply shift the CSS coding around a bit to get it to work properly, but I have had no luck thus far.

First, I will provide the mediawiki:common.css code.
Second, I will provide a screenshot of the wiki page demonstrating the bug.

Third, I will provide the wiki syntax of the page shown in the screenshot.

h1 {font-variant:small-caps; font-size:200%; font-weight:bold; white-space:nowrap;}
h2 {font-variant:small-caps; font-size:175%; font-weight:bold; white-space:nowrap;}
h3 {font-size:150%; font-weight:bold; white-space:nowrap;}
h4 {font-size:125%; font-weight:bold; white-space:nowrap;}
h5 {font-size:112%; font-weight:bold; white-space:nowrap;}
h6 {font-size:100%; font-weight:bold; white-space:nowrap;}
#bodyContent h1, #bodyContent h2 {margin-bottom: 0.1em;}


table.Default {background:white; color:white; border:1px solid gray;}
table.Default th {background:gray;}
table.Default td {color:black; border:1px solid lightgray;}
table.Default ul {list-style-image:none; list-style-type:square;}
table.Default a:link {color:rgb(51, 102, 102); text-decoration:none;}
table.Default a:visited {color:rgb(51, 102, 102); text-decoration:none;}
table.Default a:hover {color:rgb(153, 204, 204); text-decoration:none;}
table.Default a:active {color:rgb(51, 102, 102); text-decoration:none;}

table.Default2 {background:white; color:white; border:1px solid gray;}
table.Default2 th {background:gray;}
table.Default2 td {color:black; border:1px solid lightgray; padding:5px;}
table.Default2 ul {list-style-image:none; list-style-type:square;}
table.Default2 a:link {color:rgb(51, 102, 102); text-decoration:none;}
table.Default2 a:visited {color:rgb(51, 102, 102); text-decoration:none;}
table.Default2 a:hover {color:rgb(153, 204, 204); text-decoration:none;}
table.Default2 a:active {color:rgb(51, 102, 102); text-decoration:none;}


table.ProductsAndServices {background:rgb(100,0,0); color:white; border:1px solid rgb(50,0,0);}
table.ProductsAndServices th {background:rgb(50,0,0);}
table.ProductsAndServices td {border:1px solid rgb(50,0,0);}
table.ProductsAndServices ul {list-style-image:none; list-style-type:square;}
table.ProductsAndServices a:link {color:rgb(255,100,100); text-decoration:none;}
table.ProductsAndServices a:visited {color:rgb(255,100,100); text-decoration:none;}
table.ProductsAndServices a:hover {color:rgb(255,200,200); text-decoration:none;}
table.ProductsAndServices a:active {color:rgb(255,100,100); text-decoration:none;}
table.ProductsAndServices th a:link {color:white; text-decoration:none;}
table.ProductsAndServices th a:visited {color:white; text-decoration:none;}
table.ProductsAndServices th a:hover {color:rgb(255,200,200); text-decoration:none;}
table.ProductsAndServices th a:active {color:white; text-decoration:none;}

table.ProductsAndServices2 {background:rgb(200,0,0); color:white; border:1px solid rgb(50,0,0); border-spacing:1px;}
table.ProductsAndServices2 th {background:rgb(175,0,0); white-space:nowrap;}
table.ProductsAndServices2 td {background:rgb(255,245,245); color:black; border:1px solid rgb(50,0,0); padding:5px;}
table.ProductsAndServices2 ul {color:black; list-style-image:none; list-style-type:square;}
table.ProductsAndServices2 a:link {color:rgb(51, 102, 102); text-decoration:none;}
table.ProductsAndServices2 a:visited {color:rgb(51, 102, 102); text-decoration:none;}
table.ProductsAndServices2 a:hover {color:rgb(153, 204, 204); text-decoration:none;}
table.ProductsAndServices2 a:active {color:rgb(51, 102, 102); text-decoration:none;}
table.ProductsAndServices2 th a:link {color:white; text-decoration:none;}
table.ProductsAndServices2 th a:visited {color:white; text-decoration:none;}
table.ProductsAndServices2 th a:hover {color:rgb(255,200,200); text-decoration:none;}
table.ProductsAndServices2 th a:active {color:white; text-decoration:none;}


table.Tools {background:rgb(225,125,0); color:white; border:1px solid rgb(200,100,0);}
table.Tools th {background:rgb(200,100,0);}
table.Tools td {border:1px solid rgb(200,100,0);}
table.Tools ul {list-style-image:none; list-style-type:square;}
table.Tools a:link {color:rgb(255,200,150); text-decoration:none;}
table.Tools a:visited {color:rgb(255,200,150); text-decoration:none;}
table.Tools a:hover {color:rgb(255,225,200); text-decoration:none;}
table.Tools a:active {color:rgb(255,200,150); text-decoration:none;}
table.Tools th a:link {color:white; text-decoration:none;}
table.Tools th a:visited {color:white; text-decoration:none;}
table.Tools th a:hover {color:rgb(255,225,200); text-decoration:none;}
table.Tools th a:active {color:white; text-decoration:none;}

table.Tools2 {background:rgb(255,175,0); color:white; border:1px solid rgb(200,100,0); border-spacing:1px;}
table.Tools2 th {background:rgb(225,150,0); white-space:nowrap;}
table.Tools2 td {background:rgb(255,245,225); color:black; border:1px solid rgb(200,100,0); padding:5px;}
table.Tools2 ul {color:black; list-style-image:none; list-style-type:square;}
table.Tools2 a:link {color:rgb(51, 102, 102); text-decoration:none;}
table.Tools2 a:visited {color:rgb(51, 102, 102); text-decoration:none;}
table.Tools2 a:hover {color:rgb(153, 204, 204); text-decoration:none;}
table.Tools2 a:active {color:rgb(51, 102, 102); text-decoration:none;}
table.Tools2 th a:link {color:white; text-decoration:none;}
table.Tools2 th a:visited {color:white; text-decoration:none;}
table.Tools2 th a:hover {color:rgb(255,225,200); text-decoration:none;}
table.Tools2 th a:active {color:white; text-decoration:none;}


table.Email {background:rgb(175,175,0); color:white; border:1px solid rgb(150,150,0);}
table.Email th {background:rgb(150,150,0);}
table.Email td {border:1px solid rgb(150,150,0);}
table.Email ul {list-style-image:none; list-style-type:square;}
table.Email a:link {color:rgb(255,255,100); text-decoration:none;}
table.Email a:visited {color:rgb(255,255,100); text-decoration:none;}
table.Email a:hover {color:rgb(255,255,200); text-decoration:none;}
table.Email a:active {color:rgb(255,255,100); text-decoration:none;}
table.Email th a:link {color:white; text-decoration:none;}
table.Email th a:visited {color:white; text-decoration:none;}
table.Email th a:hover {color:rgb(255,255,200); text-decoration:none;}
table.Email th a:active {color:white; text-decoration:none;}

table.Email2 {background:rgb(225,255,0); color:white; border:1px solid rgb(150,150,0); border-spacing:1px;}
table.Email2 th {background:rgb(200,200,0); white-space:nowrap;}
table.Email2 td {background:rgb(255,255,225); color:black; border:1px solid rgb(150,150,0); padding:5px;}
table.Email2 ul {color:black; list-style-image:none; list-style-type:square;}
table.Email2 a:link {color:rgb(51, 102, 102); text-decoration:none;}
table.Email2 a:visited {color:rgb(51, 102, 102); text-decoration:none;}
table.Email2 a:hover {color:rgb(153, 204, 204); text-decoration:none;}
table.Email2 a:active {color:rgb(51, 102, 102); text-decoration:none;}
table.Email2 th a:link {color:white; text-decoration:none;}
table.Email2 th a:visited {color:white; text-decoration:none;}
table.Email2 th a:hover {color:rgb(255,255,200); text-decoration:none;}
table.Email2 th a:active {color:white; text-decoration:none;}


table.DomainNameSystem {background:rgb(0,100,0); color:white; border:1px solid rgb(0,50,0);}
table.DomainNameSystem th {background:rgb(0,50,0);}
table.DomainNameSystem td {border:1px solid rgb(0,50,0);}
table.DomainNameSystem ul {list-style-image:none; list-style-type:square;}
table.DomainNameSystem a:link {color:rgb(100,255,100); text-decoration:none;}
table.DomainNameSystem a:visited {color:rgb(100,255,100); text-decoration:none;}
table.DomainNameSystem a:hover {color:rgb(200,255,200); text-decoration:none;}
table.DomainNameSystem a:active {color:rgb(100,255,100); text-decoration:none;}
table.DomainNameSystem th a:link {color:white; text-decoration:none;}
table.DomainNameSystem th a:visited {color:white; text-decoration:none;}
table.DomainNameSystem th a:hover {color:rgb(200,255,200); text-decoration:none;}
table.DomainNameSystem th a:active {color:white; text-decoration:none;}

table.DomainNameSystem2 {background:rgb(0,200,0); color:white; border:1px solid rgb(0,50,0); border-spacing:1px;}
table.DomainNameSystem2 th {background:rgb(0,150,0); white-space:nowrap;}
table.DomainNameSystem2 td {background:rgb(235,255,235); color:black; border:1px solid rgb(0,50,0); padding:5px;}
table.DomainNameSystem2 ul {color:black; list-style-image:none; list-style-type:square;}
table.DomainNameSystem2 a:link {color:rgb(51, 102, 102); text-decoration:none;}
table.DomainNameSystem2 a:visited {color:rgb(51, 102, 102); text-decoration:none;}
table.DomainNameSystem2 a:hover {color:rgb(153, 204, 204); text-decoration:none;}
table.DomainNameSystem2 a:active {color:rgb(51, 102, 102); text-decoration:none;}
table.DomainNameSystem2 th a:link {color:white; text-decoration:none;}
table.DomainNameSystem2 th a:visited {color:white; text-decoration:none;}
table.DomainNameSystem2 th a:hover {color:rgb(200,255,200); text-decoration:none;}
table.DomainNameSystem2 th a:active {color:white; text-decoration:none;}


table.Policies {background:rgb(0,0,150); color:white; border:1px solid rgb(0,0,100);}
table.Policies th {background:rgb(0,0,50);}
table.Policies td {border:1px solid rgb(0,0,100);}
table.Policies ul {list-style-image:none; list-style-type:square;}
table.Policies a:link {color:rgb(100,100,255); text-decoration:none;}
table.Policies a:visited {color:rgb(100,100,255); text-decoration:none;}
table.Policies a:hover {color:rgb(200,200,255); text-decoration:none;}
table.Policies a:active {color:rgb(100,100,255); text-decoration:none;}
table.Policies th a:link {color:white; text-decoration:none;}
table.Policies th a:visited {color:white; text-decoration:none;}
table.Policies th a:hover {color:rgb(200,200,255); text-decoration:none;}
table.Policies th a:active {color:white; text-decoration:none;}

table.Policies2 {background:rgb(0,0,255); color:white; border:1px solid rgb(0,0,100); border-spacing:1px;}
table.Policies2 th {background:rgb(0,0,200); white-space:nowrap;}
table.Policies2 td {background:rgb(235,235,255); color:black; border:1px solid rgb(0,0,100); padding:5px;}
table.Policies2 ul {color:black; list-style-image:none; list-style-type:square;}
table.Policies2 a:link {color:rgb(51, 102, 102); text-decoration:none;}
table.Policies2 a:visited {color:rgb(51, 102, 102); text-decoration:none;}
table.Policies2 a:hover {color:rgb(153, 204, 204); text-decoration:none;}
table.Policies2 a:active {color:rgb(51, 102, 102); text-decoration:none;}
table.Policies2 th a:link {color:white; text-decoration:none;}
table.Policies2 th a:visited {color:white; text-decoration:none;}
table.Policies2 th a:hover {color:rgb(200,200,255); text-decoration:none;}
table.Policies2 th a:active {color:white; text-decoration:none;}


table.Training {background:rgb(100,0,100); color:white; border:1px solid rgb(50,0,50);}
table.Training th {background:rgb(50,0,50);}
table.Training td {border:1px solid rgb(50,0,50);}
table.Training ul {list-style-image:none; list-style-type:square;}
table.Training a:link {color:rgb(255,100,255); text-decoration:none;}
table.Training a:visited {color:rgb(255,100,255); text-decoration:none;}
table.Training a:hover {color:rgb(255,200,255); text-decoration:none;}
table.Training a:active {color:rgb(255,100,255); text-decoration:none;}
table.Training th a:link {color:white; text-decoration:none;}
table.Training th a:visited {color:white; text-decoration:none;}
table.Training th a:hover {color:rgb(255,200,255); text-decoration:none;}
table.Training th a:active {color:white; text-decoration:none;}

table.Training2 {background:rgb(175,0,175); color:white; border:1px solid rgb(50,0,50); border-spacing:1px;}
table.Training2 th {background:rgb(125,0,125); white-space:nowrap;}
table.Training2 td {background:rgb(255,235,255); color:black; border:1px solid rgb(50,0,50); padding:5px;}
table.Training2 ul {color:black; list-style-image:none; list-style-type:square;}
table.Training2 a:link {color:rgb(51, 102, 102); text-decoration:none;}
table.Training2 a:visited {color:rgb(51, 102, 102); text-decoration:none;}
table.Training2 a:hover {color:rgb(153, 204, 204); text-decoration:none;}
table.Training2 a:active {color:rgb(51, 102, 102); text-decoration:none;}
table.Training2 th a:link {color:white; text-decoration:none;}
table.Training2 th a:visited {color:white; text-decoration:none;}
table.Training2 th a:hover {color:rgb(255,200,255); text-decoration:none;}
table.Training2 th a:active {color:white; text-decoration:none;}


table.WebsiteBuilders {background:rgb(75,50,0); color:white; border:1px solid rgb(25,0,0);}
table.WebsiteBuilders th {background:rgb(25,0,0);}
table.WebsiteBuilders td {border:1px solid rgb(50,25,0);}
table.WebsiteBuilders ul {list-style-image:none; list-style-type:square;}
table.WebsiteBuilders a:link {color:rgb(250,225,100); text-decoration:none;}
table.WebsiteBuilders a:visited {color:rgb(250,225,100); text-decoration:none;}
table.WebsiteBuilders a:hover {color:rgb(255,250,200); text-decoration:none;}
table.WebsiteBuilders a:active {color:rgb(250,225,100); text-decoration:none;}
table.WebsiteBuilders th a:link {color:white; text-decoration:none;}
table.WebsiteBuilders th a:visited {color:white; text-decoration:none;}
table.WebsiteBuilders th a:hover {color:rgb(255,250,200); text-decoration:none;}
table.WebsiteBuilders th a:active {color:white; text-decoration:none;}

table.WebsiteBuilders2 {background:rgb(175,125,0); color:white; border:1px solid rgb(25,0,0); border-spacing:1px;}
table.WebsiteBuilders2 th {background:rgb(125,75,0); white-space:nowrap;}
table.WebsiteBuilders2 td {background:rgb(255,240,225); color:black; border:1px solid rgb(25,0,0); padding:5px;}
table.WebsiteBuilders2 ul {color:black; list-style-image:none; list-style-type:square;}
table.WebsiteBuilders2 a:link {color:rgb(51, 102, 102); text-decoration:none;}
table.WebsiteBuilders2 a:visited {color:rgb(51, 102, 102); text-decoration:none;}
table.WebsiteBuilders2 a:hover {color:rgb(153, 204, 204); text-decoration:none;}
table.WebsiteBuilders2 a:active {color:rgb(51, 102, 102); text-decoration:none;}
table.WebsiteBuilders2 th a:link {color:white; text-decoration:none;}
table.WebsiteBuilders2 th a:visited {color:white; text-decoration:none;}
table.WebsiteBuilders2 th a:hover {color:rgb(255,250,200); text-decoration:none;}
table.WebsiteBuilders2 th a:active {color:white; text-decoration:none;}


table.Troubleshooting {background:rgb(50,50,50); color:white; border:1px solid rgb(0,0,0);}
table.Troubleshooting th {background:rgb(0,0,0);}
table.Troubleshooting td {border:1px solid rgb(0,0,0);}
table.Troubleshooting ul {list-style-image:none; list-style-type:square;}
table.Troubleshooting a:link {color:rgb(175,175,175); text-decoration:none;}
table.Troubleshooting a:visited {color:rgb(175,175,175); text-decoration:none;}
table.Troubleshooting a:hover {color:rgb(255,255,255); text-decoration:none;}
table.Troubleshooting a:active {color:rgb(175,175,175); text-decoration:none;}
table.Troubleshooting th a:link {color:white; text-decoration:none;}
table.Troubleshooting th a:visited {color:white; text-decoration:none;}
table.Troubleshooting th a:hover {color:rgb(225,225,225); text-decoration:none;}
table.Troubleshooting th a:active {color:white; text-decoration:none;}

table.Troubleshooting2 {background:rgb(150,150,150); color:white; border:1px solid rgb(0,0,0); border-spacing:1px;}
table.Troubleshooting2 th {background:rgb(100,100,100); white-space:nowrap;}
table.Troubleshooting2 td {background:rgb(245,245,245); color:black; border:1px solid rgb(0,0,0); padding:5px;}
table.Troubleshooting2 ul {color:black; list-style-image:none; list-style-type:square;}
table.Troubleshooting2 a:link {color:rgb(51, 102, 102); text-decoration:none;}
table.Troubleshooting2 a:visited {color:rgb(51, 102, 102); text-decoration:none;}
table.Troubleshooting2 a:hover {color:rgb(153, 204, 204); text-decoration:none;}
table.Troubleshooting2 a:active {color:rgb(51, 102, 102); text-decoration:none;}
table.Troubleshooting2 th a:link {color:white; text-decoration:none;}
table.Troubleshooting2 th a:visited {color:white; text-decoration:none;}
table.Troubleshooting2 th a:hover {color:rgb(225,225,225); text-decoration:none;}
table.Troubleshooting2 th a:active {color:white; text-decoration:none;}

the screenshot http://testrfrost.ipage.com/stackoverflow/mediawiki_css_table_class_bug.JPG

{|width="100%"
|
{|class="Default2" width="100%"
!Default2 Header
|-
|Default2 Body
|-
|
{|class="ProductsAndServices2" width="100%"
!ProductsAndServices2 Header
|-
|ProductsAndServices2 Body
|-
|
{|class="Tools2" width="100%"
!Tools2 Header
|-
|Tools2 Body
|-
|
{|class="Email2" width="100%"
!Email2 Header
|-
|Email2 Body
|-
|
{|class="DomainNameSystem2" width="100%"
!DomainNameSystem2 Header
|-
|DomainNameSystem2 Body
|-
|
{|class="Policies2" width="100%"
!Policies2 Header
|-
|Policies2 Body
|-
|
{|class="Training2" width="100%"
!Training2 Header
|-
|Training2 Body
|-
|
{|class="WebsiteBuilders2" width="100%"
!WebsiteBuilders2 Header
|-
|WebsiteBuilders2 Body
|-
|
{|class="Troubleshooting2" width="100%"
!Troubleshooting2 Header
|-
|Troubleshooting2 Body
|}
|}
|}
|}
|}
|}
|}
|}
|}
|
{|class="Troubleshooting2" width="100%"
!Troubleshooting2 Header
|-
|Troubleshooting2 body
|-
|
{|class="WebsiteBuilders2" width="100%"
!WebsiteBuilders2 Header
|-
|WebsiteBuilders2 body
|-
|
{|class="Training2" width="100%"
!Training2 Header
|-
|Training2 body
|-
|
{|class="Policies2" width="100%"
!Policies2 Header
|-
|Policies2 body
|-
|
{|class="DomainNameSystem2" width="100%"
!DomainNameSystem2 Header
|-
|DomainNameSystem2 body
|-
|
{|class="Email2" width="100%"
!Email2 Header
|-
|Email2 body
|-
|
{|class="Tools2" width="100%"
!Tools2 Header
|-
|Tools2 body
|-
|
{|class="ProductsAndServices2" width="100%"
!ProductsAndServices2 Header
|-
|ProductsAndServices2 body
|-
|
{|class="Default2" width="100%"
!Default2 Header
|-
|Default2 body
|}
|}
|}
|}
|}
|}
|}
|}
|}
|-
|
{|class="Default" width="100%"
!Default Header
|-
|Default body
|-
|
{|class="ProductsAndServices" width="100%"
!ProductsAndServices Header
|-
|ProductsAndServices body
|-
|
{|class="Tools" width="100%"
!Tools Header
|-
|Tools body
|-
|
{|class="Email" width="100%"
!Email Header
|-
|Email body
|-
|
{|class="DomainNameSystem" width="100%"
!DomainNameSystem Header
|-
|DomainNameSystem body
|-
|
{|class="Policies" width="100%"
!Policies Header
|-
|Policies body
|-
|
{|class="Training" width="100%"
!Training Header
|-
|Training body
|-
|
{|class="WebsiteBuilders" width="100%"
!WebsiteBuilders Header
|-
|WebsiteBuilders body
|-
|
{|class="Troubleshooting" width="100%"
!Troubleshooting Header
|-
|Troubleshooting body
|}
|}
|}
|}
|}
|}
|}
|}
|}
|
{|class="Troubleshooting" width="100%"
!Troubleshooting Header
|-
|Troubleshooting body
|-
|
{|class="WebsiteBuilders" width="100%"
!WebsiteBuilders Header
|-
|WebsiteBuilders body
|-
|
{|class="Training" width="100%"
!Training Header
|-
|Training body
|-
|
{|class="Policies" width="100%"
!Policies Header
|-
|Policies body
|-
|
{|class="DomainNameSystem" width="100%"
!DomainNameSystem Header
|-
|DomainNameSystem body
|-
|
{|class="Email" width="100%"
!Email Header
|-
|Email body
|-
|
{|class="Tools" width="100%"
!Tools Header
|-
|Tools body
|-
|
{|class="ProductsAndServices" width="100%"
!ProductsAndServices Header
|-
|ProductsAndServices body
|-
|
{|class="Default" width="100%"
!Default Header
|-
|Default body
|}
|}
|}
|}
|}
|}
|}
|}
|}
|}


{|width="100%"
|
{|class="Default2" width="100%"
!Default2 Header
|-
|Default2 Body
|}
|
{|class="ProductsAndServices2" width="100%"
!ProductsAndServices2 Header
|-
|ProductsAndServices2 Body
|}
|
{|class="Tools2" width="100%"
!Tools2 Header
|-
|Tools2 Body
|}
|-
|
{|class="Email2" width="100%"
!Email2 Header
|-
|Email2 Body
|}
|
{|class="DomainNameSystem2" width="100%"
!DomainNameSystem2 Header
|-
|DomainNameSystem2 Body
|}
|
{|class="Policies2" width="100%"
!Policies2 Header
|-
|Policies2 Body
|}
|-
|
{|class="Training2" width="100%"
!Training2 Header
|-
|Training2 Body
|}
|
{|class="WebsiteBuilders2" width="100%"
!WebsiteBuilders2 Header
|-
|WebsiteBuilders2 Body
|}
|
{|class="Troubleshooting2" width="100%"
!Troubleshooting2 Header
|-
|Troubleshooting2 Body
|}
|}


{|width="100%"
|
{|class="Default" width="100%"
!Default Header
|-
|Default Body
|}
|
{|class="ProductsAndServices" width="100%"
!ProductsAndServices Header
|-
|ProductsAndServices Body
|}
|
{|class="Tools" width="100%"
!Tools Header
|-
|Tools Body
|}
|-
|
{|class="Email" width="100%"
!Email Header
|-
|Email Body
|}
|
{|class="DomainNameSystem" width="100%"
!DomainNameSystem Header
|-
|DomainNameSystem Body
|}
|
{|class="Policies" width="100%"
!Policies Header
|-
|Policies Body
|}
|-
|
{|class="Training" width="100%"
!Training Header
|-
|Training Body
|}
|
{|class="WebsiteBuilders" width="100%"
!WebsiteBuilders Header
|-
|WebsiteBuilders Body
|}
|
{|class="Troubleshooting" width="100%"
!Troubleshooting Header
|-
|Troubleshooting Body
|}
|}

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-07T06:09:35+00:00

All of your styles are using descendant selectors rather than child selectors. So, nested tables will and should have the same styles as their parent tables. Not because of inheritance, but because they match the selector. Use child selectors instead:

table.Default > tbody > tr > td { color:black; border:1px solid lightgray; }

This way, table cells in child tables no longer match the selector. You could alternatively leave the selectors as they are and just define another, stronger selector that overrides the previous selector:

table.Default table td { border: 0px none; }

I’m not going to spend hours going through all that CSS and markup, so I’m guessing at some of this. If your problem is not that child tables are picking up parent table styles, but rather that child tables are not picking up the styles that were defined for them, you need to make your selectors stronger. For example if you have the following styles defined:

table.foo td { background-color: #ccc; }
table.bar td { background-color: #ff0; }

With this markup:

<table class="bar">
    <tbody>
        <tr>
            <td>
                <table class="foo">
                    <tbody>
                        <tr>
                            <td>Why am I yellow, and not gray?!</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

The text is yellow, not gray: http://jsfiddle.net/gilly3/gzRX6/

Why? Because table.bar td is the stronger selector. Why? When two selectors are otherwise equal, the one that appears later in the document is the stronger selector. The solution for you could be as easy as moving your child table styles later in the document. But, it would be better to make them a little more obviously stronger, like by adding a tr into the mix:

table.foo tr td { background-color: #ccc; }
table.bar td { background-color: #ff0; }

http://jsfiddle.net/gilly3/gzRX6/1/

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

Problem: My table code isn’t being displayed correctly 100% of the time by mediawiki.

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply