Prevent child tables inheriting alternate row colours

Question

I have a simple HTML table and I want to have alternate row colours. I've done this in my stylesheet using nth-child on the table rows. There are also sub-tables in rows. The problem is, I don't want the rows in these sub-tables to be alternate colours. How can I achieve this?

I'd expect the first row to be grey, including all rows in the address sub-table. The second row should be all blue and so on. The current output is:

index.html:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <table class="my-table">
        <tr>
            <td>Address</td>
            <td>
                <table>
                    <tr><td>Addr Line 1</td></tr>
                    <tr><td>City</td></tr>
                    <tr><td>Postcode</td></tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Specialties</td>
            <td>
                <table>
                    <tr><td>Cool Stuff</td></tr>
                    <tr><td>Interesting Things</td></tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Personell</td>
            <td>
                <table>
                    <tr><td>John Smith</td></tr>
                    <tr><td>Keanu Reeves</td></tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

stylesheet.css:

.my-table tr {
    background: grey;
}

.my-table tr:nth-child(even) {
    background-color: CornflowerBlue;
}

Update: I'm not sure it's really a duplicate question. Please could you at least give a more informative answer before shutting it down?

a duplicate question is not a question that has exactly the same issue as you, but that contain the needed answer if you carefully follow it and read all the relevant answers and related links — Temani Afif, Mar 13 '18 at 14:55
check this https://jsfiddle.net/8n9868rb/1/ ... here is the direct answer if you don't want to try to understand how .. — Temani Afif, Mar 13 '18 at 14:58
@TemaniAfif Thanks, that helped. I was missing the `tbody` element. I'll let this question disappear... — petehallw, Mar 13 '18 at 14:59

Prevent child tables inheriting alternate row colours

0 Answers0