Мой стол не наследует свой стиль от моего внешнего css

Question

Мой индекс. html файл выглядит следующим образом ..

<table class="tablecontainer">
    <table id="table1"></table>
</table>

Мои стили. css файл выглядит следующим образом ...

.tablecontainer #table1 th, td {
    border: 1px solid #ddd;
    border-collapse:collapse;
    font-family:"Open Sans";
    font-size: 30px;
    }
.tablecontainer #table1 tr:nth-child(even) {
    background-color: #fff;
    font-family:"Open Sans";
    font-size: 12px;
    }
.tablecontainer #table1 tr:nth-child(odd) {
    background-color: #eee;
    font-family:"Open Sans";
    font-size: 12px;
    }
.tablecontainer #table1 th {
    background-color: grey;
    color: white;
    text-align: left;
    font-family:"Open Sans";
    font-size: 16px;
    }
.tablecontainer #table1 tr:hover {
    background-color: #cce6ff;
    }

Я могу подтвердить, что стили для других вещей, таких как кнопки, заголовки и т. д. c, правильно подобраны из моего файла стилей. css.

Однако стили для моей таблицы не выбираются (ни один из стилей, которые я написал в стилях. css не наследуется для таблицы.

I ' m плохо знаком с html / css в целом.

РЕДАКТИРОВАТЬ (к первоначальному вопросу):

<div class="tablecontainer">
    <table id="table1"></table>
</div>
<script>
    ...
    var trHTML = '';
    trHTML += '<tr><th>...</tr><th>';
    ...
  $('#table1').append(trHTML);
</script>

Answer 1

Невозможно вставить таблицу непосредственно в другой тег

. <table class="tablecontainer"> <tr><td> <table id="table1"></table> </td></tr> </table>