stop Table Inheritance

Question

I'm trying to figure out how can I have a table within another table such that the child table does not inherit the styles of the parent table...

If I have a table with

<table align='center' class='tab1' ....
<tr> <td> ...<table class='tab2' ....

.tab table, .tab th, .tab tr, .tab td { 
padding: 0;
margin:0;
vertical-align: top;
font-size: 11px;
line-height: 15px;
padding-top: 5px;
padding-bottom: 5px;
}

.tab table {
border-collapse: collapse;  
font-size: 11px;
border: 1px solid #999;
table-layout: fixed;
}

---

I think I should have told you what extactly my table is listing before I proceed to ask for help. My table is listing information iterated through until the end. For each row, there is a hidden div that allows information to be seen when a button is clicked for an associated row. This is where I wanted to use another table to position a 3 column table within my two parent table. After thinking about it, I rather not have nested tables.. Now you said there was another better way to do it. I assume it's better to use divs and use position properties for the specific elements within the row.

An example of my output is shown below:

name - title                                     view edit
email - country
----hidden info-----
address ......              alternate email                 notes...
............                other info.....
.............               other info .....

Answer 1

The selector you're looking for would look like this:

table#mytable > tr > td {
  ...your properties
}

The chevrons (>) ensure that only the immediate children, and not grandchildren get assigned the properties. this means the tr's and td's for the child table will not be selected.

BUT, I caution you against using tables for positioning...depending on the screen reader, visually impaired users might hear all sorts of strange output. You might want to consider their experience moving forward.