HTML and CSS table is getting wrong style by inheritance

Question

I've got a HTML/CSS code, which reacts a little weird (in my opinion). Or I just don't understand inheritance of styles.

The following code snippet is what causes the problem:

enter image description here

You can see I've got a table with the class formula. and on the right side you can see that every table.formular td gets a padding.

Below, in one of the tds of the formular table I've got a new table with the class tabelle-rubrikbar. This table contains a td with the class customSearch-InnerTable-td which should overwrite the padding. But in this case the inherited formular td is overwriting the customSearch-InnerTable-td.

You should include sufficient code as text in the question, instead of a mere partial screenshot. In this case, there happens to be sufficient information to guess what the real problem is (it has nothing to do with inheritance). — Jukka K. Korpela
– Jukka K. Korpela, Commented Jan 20, 2014 at 12:37

Fabrizio Calderan · Accepted Answer · 2014-01-20 12:33:21Z

4

you should use an higher specificity for your rule, e.g.

table.formular td.customSearch-InnerTable-td { ... }

For further explanation see http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

answered Jan 20, 2014 at 12:33

Fabrizio Calderan

124k26 gold badges172 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mihey Egoroff Over a year ago

I think td.customSearch-InnerTable-td will be enough

Fabrizio Calderan Over a year ago

it's not enough since his first rule is table.formular td

Loki Over a year ago

Works for chrome, thanks. But IE won't accept that this is higher priority :(

Fabrizio Calderan Over a year ago

@Loki: why not? this is css should overwrite the previous one even on IE6. Or are you talking about a specific issue/bug?

Loki Over a year ago

Ah IE had the css in cache. That's why it didn't work. Thank you :D

Soundz · Accepted Answer · 2014-01-20 12:32:54Z

0

Just be more specific with your declaration. The more you narrow down the css style the higher gets is priority over other styles

It behaves like this:

td < td.class so give your class a higher priority like

.tabelle-rubrikbar tr td.customSearch-InnterTable-td

answered Jan 20, 2014 at 12:32

Soundz

1,30010 silver badges17 bronze badges

2 Comments

Soundz Over a year ago

that example was not like "use this style" it was just to clarify that the td.class style got higher priority than just td

Hashem Qolami Over a year ago

I withdrew my comment.

DhruvJoshi · Accepted Answer · 2014-01-20 12:35:46Z

-1

You should try adding !important at the end of customSearch-InnerTable-td like

customSearch-InnerTable-td {
padding: 0px 0px 0px 0px !important;}

edited Jan 20, 2014 at 12:35

answered Jan 20, 2014 at 12:30

DhruvJoshi

17.2k6 gold badges46 silver badges63 bronze badges

2 Comments

DhruvJoshi Over a year ago

Try reading up here - [link] (w3.org/TR/CSS2/cascade.html#important-rules)

Mihey Egoroff Over a year ago

Don't use !important unless you don't have other choice!

Sankalp Srivastava · Accepted Answer · 2014-01-20 12:34:08Z

-2

mark the css of the customSearch-InnerTable-td as "!important" (without the quotes) and it will increase the priority of the styling you have used in the customSearch-InnerTable-td. Its a small hack which works fine always

answered Jan 20, 2014 at 12:34

Sankalp Srivastava

4022 silver badges12 bronze badges

Collectives™ on Stack Overflow

HTML and CSS table is getting wrong style by inheritance

4 Answers 4

5 Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related