CSS and Nested tables

Question

I have html table that contains multiple other tables. My problem is that the inner tables inherit the same rules as the outer table.

Is there a way to over ride the rules of the outer table? I basically want to tell the inner table:

Hey inner table Your name is "X". I want you to forget all about your outer table and its rules. I want you to follow these other specific rules.

IS there a way to make that happen in HTML/CSS? Examples?

Your best bet would be to learn how to create page layouts with CSS and <div>'s instead of nested tables. It's the proper way layouts are done now. — Sparky
– Sparky, Commented Oct 29, 2011 at 16:41
I hate maintaining old code that is full of nested tables ><; — Nick Rolando
– Nick Rolando, Commented Oct 29, 2011 at 16:57
table {/*rules*/} and table table {/*other overriding rules*/} that's how it's done? — Joseph Marikle
– Joseph Marikle, Commented Oct 29, 2011 at 17:01
@Sparky even today (2.5 years later), some data is still tabular. And now and then one has to deal with data that has more than two dimensions. Also, the OP's problem gets neither better nor worse when the markup is e.g. div.outer > div.row > div.cell > div.inner > div.row > div.cell instead of table.outer > tr > td > table.inner > tr > td. — peterp
– peterp, Commented Jun 26, 2014 at 7:35

Niet the Dark Absol · Accepted Answer · 2011-10-30 03:39:18Z

26

table.something > thead > tr > td,
table.something > tbody > tr > td,
table.something > tfoot > tr > td,
table.something > tr > td {
   ...
}

This will ensure that only direct children of the selected table, and not of nested tables, will receive the styles.

answered Oct 30, 2011 at 3:39

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

Comments

user3459110 · Accepted Answer · 2014-05-03 14:08:59Z

4

I'll assume you have the following

HTML

<table class="outer-table">
    <tr>
        <td>
            <table class="inner-table">
                <tr>
                    <td>
                        I'm some content!
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS - Without class/ID

table { border: 1px solid black; }
table tr td table { border: 1px solid green; }

Sometimes you can get away with:

table { border: 1px solid black; }
table table { border: 1px solid green; }

CSS - With Class/ID

A little note with Classes and IDs. Classes are something that can be applied to as many elements as you desire and carry the styling specified. IDs should only be used for one element, as this is an identification to that element. That means if you have two nested tables, you need to give that second table a new unique ID.

ID's are shown as # in CSS. So if you just want to use it for the specific ID, it will be:

#outer-table { /* Outer table Style */ }
#inner-table { /* Inner table Style */ }

Using the class (as the example shows) in CSS, is a period. If you use the period without specifying the element, it will be used for all elements that have a class of the same name, so it's best to specify what element you want it attached to.

table.outer-table { /* Outer table Style */ }
table.inner-table { /* Inner table Style */ }

edited May 3, 2014 at 14:08

user3459110

7,0713 gold badges29 silver badges34 bronze badges

answered Oct 29, 2011 at 17:05

Dave

90211 silver badges20 bronze badges

6 Comments

Sparky Over a year ago

What's wrong with assigning classes and/or id's to the tables instead?

Dave Over a year ago

There isn't anything wrong with assigning classes and/or IDs to the elements, it's recommended! Although, I've worked on a few projects where we were not able to modify the markup in any way. Just modify the external stylesheet. I was just assuming things (3am >.<)

codingJoe Over a year ago

I am starting to see the pattern. Although I intend to use class names at the minimum. What does table table { format stuff; } look like when class names are applied?

Dave Over a year ago

That would be simply <table class="myclass">...</table>. Then your CSS would be table.mycalss { /* style */ }. I'll add this to the answer so you can see how it is.

albert Over a year ago

@cumbo's advice is wise. i made these examples last night; they're the same table, once just got alot more depth than the other, you can see exactly what's going on there. jsfiddle.net/jalbertbowdenii/bMZfv jsfiddle.net/jalbertbowdenii/bMZfv/13 they aren't nested tables, so that's why this is a comment and not an answer; regardless, you can easily target them exactly like this.

|

jimminySnippet · Accepted Answer · 2016-10-06 03:59:41Z

1

The easiest way is class and id. Be sure to use the element.

table.outter { some: style; } /* class */  
table#inner { some: style; } /* id */

You can also use

table { some: style; }  
table table { some: style; } /* override outter table */

or combine the two

table.outter { some: style; } /* class */  
table.outter table#inner { some: style; } /* id */

Hope this helps.

edited Oct 6, 2016 at 3:59

answered Oct 6, 2016 at 3:54

jimminySnippet

112 bronze badges

Collectives™ on Stack Overflow

CSS and Nested tables

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related