CSS Universal Selector Combinator omits style on table tag (1st descendant) in a div

I have a table (in a div with an id) and I want to apply styling on it (to collapse its borders) using CSS's universal selector combinator (*) and all of the div's descendants (in order to isolate the CSS styling just to this table in the div). Here's a snippet of the HTML code:

<div id="table1"> <table> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> </table> </div>

Here's a snippet of the CSS code:

div#table1 * { table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px; text-align: center; } th { font-weight: bold; background-color: #E6E6E6; } }

All but the table tag get styled (i.e. the table borders don't get collapsed).

If I apply just the table styling individually everything seems to work fine:

div#table1 table { border-collapse: collapse; } div#table1 * { td, th { border: 1px solid black; padding: 3px; text-align: center; } th { font-weight: bold; background-color: #E6E6E6; } }

I don't understand why the styling doesn't work on the table tag when it's part of the CSS's Universal Selector Combinator. Is there a way to make it work without the individual styling for the table?