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 .....

If someone can show me an example online or quickly formulate one I would REALLY APPRECIATE IT. Thank you all for you help with someone learning the craft :)

Answer 1

I'd give the first table an id and put that id in your selectors (like .tab table#mytable).

Update:

<table id="outer">
  <tr>
    <td>
      <table id="inner">
        <tr>
          <td>Content here</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

... elsewhere

table#outer tr td {
  background: blue;
  padding: 10px;
  border: 5px solid #0000AF;
}
table#inner tr td {
  background: red;
  padding: 3px;
  border: 5px solid #AF0000;
}

Simply put id's on both tables and any time you write a css rule put the id of the table into the selector. This way you can easily override the styles on the outer table.

The reason this is so verbose is because in IE you can't use selectors like table#outer > tr > td to scope to only direct children of #outer. Yes, this is very annoying.

The real key here is (I agree with btelles 100% here): don't use a table inside a table just for positioning.

Answer 2

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.