Having just started learning HTML and CSS, I encountered an issue.
I applied a CSS class to a table element. Subsequently, I inserted a child table within the parent table. The problem arose when the CSS class of the parent table also influenced the child table, which is not desired.
Can someone guide me on how to prevent the CSS styles from the parent table affecting the child table?
Here is a snippet of my CSS:
.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 here is my HTML code:
<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>