title: Formatting CSS style for multiple tables on the same page
body: <p>I'm trying to format two tables on the same page with different CSS styling, however, there is inheritance I'm unable to stop it.</p>
  
  <p>For example, if I change the font color or size it changes it on both tables. </p>
  
  <p>I have tried isolating the tables in CSS by giving them, unique classes.  </p>
  
  <pre><code>table.table1 
  
  table.table2 
  </code></pre>
  
  <p>or </p>
  
  <pre><code>.table1
  
  .table2 
  </code></pre>
  
  <p>in both cases, it didn't help isolating the CSS individually. </p>
  
  <p>This is an example of the issue I'm having: </p>
  
  <p><a href="http://jsfiddle.net/amlife180/e3xr7Lqb/6/" rel="nofollow noreferrer">http://jsfiddle.net/amlife180/e3xr7Lqb/6/</a></p>