How to stop a style being applied to a table

Question

I'm setting cell padding on a HTML table using : cellpadding: 10

A padding style is being inherited which causes the cellpadding to not be set :

enter image description here

So if I deselect the padding checkbox above (in Chrome) the cellpadding is applied correctly. How can I prevent the "padding: 0" style being set on my table. I've tried using !important on the cellspacing but this does not seem to have any effect.

Try appling inline style with `!important` instead of stylesheets — Praveen, Oct 21 '13 at 14:39
Make a more specific selector. Oh, and try to never use !important whenever possible. — j08691, Oct 21 '13 at 14:40
try looking in these link for your answer http://stackoverflow.com/questions/9889565/avoid-css-styles-applying-to-child-elements — Someone, Oct 21 '13 at 14:41
!important is a blunt tool of a desperate coder. The rest of us use specificity. — Diodeus - James MacFarlane, Oct 21 '13 at 14:41

score 1 · Accepted Answer · answered Oct 21 '13 at 14:40

1

I'd avoid using the cellpadding attribute and use CSS to control your presentation.

It looks as though you're using a css reset to zero out browser default values so you simple need to re-define them where needed:

th, td {
  padding: 10px;
}

answered Oct 21 '13 at 14:40

David Randall

770
3
9

score 0 · Answer 2 · answered Oct 21 '13 at 15:10

0

Try creating more specific selectors. Something like

#myBody .myDiv table th, #myBody .myDiv table th {
    padding: 10px;
}

answered Oct 21 '13 at 15:10

Drkawashima

8,837
5
41
52

How to stop a style being applied to a table

2 Answers2