title: stop Table Inheritance
body: <p>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...</p>
  
  <p>If I have a table with </p>
  
  <pre><code>&lt;table align='center' class='tab1' ....
  &lt;tr&gt; &lt;td&gt; ...&lt;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;
  }
  </code></pre>
  
  <hr>
  
  <p>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.</p>
  
  <p>An example of my output is shown below:</p>
  
  <pre><code>name - title                                     view edit
  email - country
  ----hidden info-----
  address ......              alternate email                 notes...
  ............                other info.....
  .............               other info .....
  </code></pre>