Table inside table with different styles?

Question

How to make two different styles for two tables table cells that one cells of them is inside another table?

I have two css styles:

table.style1 { /* any styles */}
table.style1 td { /* any styles */}

and

table.style2 { /* any styles */}
table.style2 td { /* any styles */ }

In code i have somting like this:

<table class="style1">
   <tr>
      <td>
         <table class="style2">
            <tr><td>bla bla<td></tr>
         </table>
      </td>
   <tr>
</table>

and the results is - all of <td> table cells in second table (with style2) are with style1... !

How to make two different css stile, when I have table inside table?

Answer 1

Try this code. I am sure it works fine.

table.style1 { /* any styles */}

table.style1 td { /* any styles */}

and

table.style1 table.style2 { /* any styles */}

table.style1 table.style2 td { /* any styles */}