How to normalize style of bs-datepicker nested in table

Question

I have a bs-datepicker from angular strap as a td element in a table but the datepicker is inheriting the style of the table (which I would like to keep as is). It is throwing off the look of the datepicker.

This is a photo of the broken datepicker

I have tried adding :not(.datepicker) in the css for all elements but that did not work.

Simplified HTML:

<table class="jobs-table" >

            <th>datepicker</th>

            <tr>

              <td>
                <i class="ion-calendar date-icon"></i>
                <input type="text"
                       name="servicedate"
                       class="form-control date-picker-class"
                       ng-model=""
                       bs-datepicker
                        />
                 </td >


            </tr >
</table>

The CSS:

table {
width: 100%;
}

.jobs-tables tr:first-child {
border-bottom: 5px solid black;
border-top: none;
background-color: #fff;
color: #555;
line-height: 250%;
text-align: left;
}


.jobs-table tr {
border-top: 2px solid black;
line-height: 250%;
}


.tables-table td {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 207px;
padding-left: 10px;
}

.tables-table th {
white-space: nowrap;
overflow: hidden;
padding-left: 10px;
}

Answer 1

If the datepicker is indeed implemented as a table, being more specific in the CSS is the way to go, yes.
As you noticed, replacing .jobs-table tr by .jobs-table :not(.datepicker) tr didn't work, because the :not(.datepicker) can apply to any element inside the outer table (tbody, tr, td) and then the innermost tr does get the style after all.

One solution is to use the > combinator, keeping the styles confined to the outer table rather than any table nested inside.

.jobs-table {
  width: 100%;
}

.jobs-tables > tbody > tr:first-child {
  border-bottom: 5px solid black;
  border-top: none;
  background-color: #fff;
  color: #555;
  line-height: 250%;
  text-align: left;
}

.jobs-table > tbody > tr {
  border-top: 2px solid black;
  line-height: 250%;
}

Not sure what to do with the tables-table class though. Is that a class given to the datapicker table, or a different table altogether?