Question

I am new to HTML and CSS.

I have added a CSS class to a table element. Then I added a child table into the parent table. The problem is that the parent tables CSS class also affects the child table.
I dont want this to happen.

How can I ensure that the CSS applied to the parent table does not affect the child table?

My Css is as Follows:

.gtable {
    width: 100%;
}
.gtable th {
    padding: 5px 10px;
    text-align: left;
}
.gtableTH {
    text-align: center;
}
.gtable thead tr {
    border: 1px solid #CCCCCC;
    color: #333333;
}
.gtable thead th {
    background: none repeat scroll 0 0 #C0C0C0;
}
.gtable tbody tr:hover td {
    background-color: #FFFAE3;
}
.gtable td {
    padding: 5px 10px;
}
.gtable tbody tr td {
    border-bottom: 1px solid #EEEEEE;
}
.gtable tbody tr:nth-child(2n+1) .gtable thead th {
    background: -moz-linear-gradient(#FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;
}

and my HTML :

<table class="gtable">

                        <thead>

                            <tr>

                                <th>Drop Down Label</th>
                                <th>Drop Down Values</th>
                            </tr>

                        </thead>

                        <tbody class="ui-sortable">

                            <tr>

                                <td>Category 1</td>

                                <td>
                                    <table>
                                        <tbody class="ui-sortable"><tr>
                                            <td>
                                                Complaint
                                            </td>
                                            </tr>
                                            <tr>
                                            <td>
                                                Service Request
                                            </td>
                                            </tr>
                                            <tr>
                                            <td>
                                                Enquiry
                                            </td>
                                        </tr>
                                    </tbody></table>
                                </td>

                                <td>
                                     <button class="button small" type="submit">Edit</button>
                                </td>

                            </tr>

                        </tbody>
                    </table>

Answer 1

no clue without your code, but here’s a demo of two tables with nested tables. one has the styles turned off: http://jsfiddle.net/jalbertbowdenii/7QWQv/