make table2-1 inherit from table2

Code:
<!doctype html>
<html> 
<head>
<meta charset="UTF-8">
<title>style test</title>
 <style type="text/css"> 
* {  font-size:15px;}
</style>
</head>
<body >body 

<table>
  <tr>
    <td>
        table1
      <table> 
        <tr>
         <td>table1-1 </td>
       </tr>
      </table>

</td>
</tr>
</table>

<table>
  <tr>
    <td style="font-size:30px">table2

      <table> 
        <tr>
          <td style="font-size:30px">table2-1</td>
        </tr>
      </table>

    </td>
  </tr>
</table>

</body>
</html>
I have 4 tables, table1, table1-1 and table2 and table2-2 in the code above.
The font-size of the table1 and table1-1 is 15 px which is defined by the code "* { font-size:15px;}".
The font-size of the table2 and table2-1 is 30 px which is defined by the code "style="font-size:30px" in the each <td> cell.

Let's suppose I have many tables which are nested by table2 and I like to make/change the font-size of the all tables which are nested by table2 "30px".
Should I put the code "style="font-size:30px" to the all tables which are nested by table2 like the code above?

Is there anyway to make all the text in table2 font-size:30px without putting the code "style="font-size:30px" to the all tables which are nested by table2 with simply changing the font-size of table2(mother table) only?


In the case of table1,
I can change all text to font-size:20px in the tables which are nested table1 by changing the code "* { font-size:15px;}". to "* { font-size:20px;}".