My table does not inherit its styling from my external css

Question

My index.html file looks like this..

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

My styles.css file looks like this...

.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;
    }

I can confirm that the styles for other things like buttons, headers, etc are being picked up correctly from my styles.css file.

However, the styles for my table are not being picked up (none of the styles I've written up in the styles.css are being inherited for the table.

I'm new to html/css in general.

EDIT (to the original question):

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

The html structure you showed has no TR/TDs while all styles applies to TR and TDs. Could you provide a complete example of your HTML? — GriffoGoes, Mar 27 '20 at 12:28
Also, why do you use a second `` as a container? Do you need 2 tables? Otherwise you could simply the html/css by removing the container (Or change it to a `
`) — 0stone0, Mar 27 '20 at 12:32
@0stone0, the first table should actually be a div (you're right!). Would that change your advice below (was quite elaborate, thank you)? I attempted to follow your advice on the css, but hasn't remedied my situation. — GMT, Mar 27 '20 at 14:50
@GriffoGoes, thanks and apologies, I should have mentioned that the content for the table comes from javascript. — GMT, Mar 27 '20 at 14:51
@GMT I've updated my answer with an `
`. If this is still too elaborate, please improve the question so we can answer more specific. — 0stone0, Mar 27 '20 at 14:55
@GMT Are you sure the edit is correct? The `` is not closed, and should be closed before the ``. That said, it should not interfere with the styling! — 0stone0, Mar 27 '20 at 17:28

score 0 · Answer 1 · answered Mar 27 '20 at 12:45

0

You cannot insert a table directly into another tag <table> : the <tr> and <td> tags are required.

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

answered Mar 27 '20 at 12:45

AlainPre

441
3
4

AlainPre, thanks (my apologies for not being clear about the source of my data). – GMT Mar 27 '20 at 16:23

My table does not inherit its styling from my external css

1 Answers1