CSS TD element style overrides Table class style.

I’ve created the MyTableClass CSS class(stored in .CSS file)  and specified it to a HTML table.

.MyTableClass

{

font-size: 8pt;

}

 

However the size of font inside the table was bigger than I specified.

Thanks to VS 2008 CSS properties pane – Applied Rules section I was able to find that the rule was overridden by TD element style

TD

{

font-size: 12px;

}

 

It was not hard to create hack to override global TD.

.MyTableClass TD

{

font-size: 8pt;

}

 

I feel that having global element rule is not a good idea.

Unfortunately I am scared to change the style, because it is used in many places in production.

Update: I found very similar post Tackling Stubborn TD Style Definitions, written by Jovan.    

Related articles:

CSS Style Table – styling tables with only one class 

My post Adaping CSS and Javascript from Html Prototype.