How to apply table css to this structure?

Question

I have this html markup:

<div class="entry-content"><table>
<thead>
<tr>
<th></th>
<th><strong>32nd</strong>  </th>
<th> <strong>Decimal</strong></th>
</tr>
...

How I can specify to apply a set of table style specifically to the table enclosed in a entry-content class width?

I have tried this in my .css like this:

#entry-content {
  .table { 

But it does not work.

EDIT

It has to be very specific to this structure. i.e. the css must apply to only

.entry-content table 

not

.entry-content p table 

Otherwise the css may stuff up layouts that also uses table

Answer 1

Use this CSS selector.

.entry-content table{
   //styles here
}

If you want to apply styles to tr and th use this selector

.entry-content table tr{
   //some styles
}

.entry-content table th{
   //some styles
}

Edit

The above selector selects any table (not just immediate child) that is inside the .entry-content, even if the table is inside of another div, which is inside the .entry-content.

In order to select an immediate child/table of the .entry-content use this selector:

.entry-content > table{
    //some style
}