How to prevent to pass css attributes to the inner elements?
I'm creating 3 tables.
<table id="first">
<tr>
<td>
1. CAPTION
</td>
</tr>
<tr>
<td>
<table id="second">
<tr>
<td>
2. CAPTION
</td>
</tr>
<tr>
开发者_如何学Go <td>
<img src="" width="100" height="100" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table id="third">
<tr>
<td>
3. CAPTION
</td>
</tr>
<tr>
<td>
<img src="" width="100" height="100" />
</td>
</tr>
</table>
</td>
</tr>
</table>
I want to add 10px padding (padding-top:10px) for the main table td elements.
#first tr td
{
padding-top: 10px;
padding-left: 0pt;
}
But this padding is adding to inner tables td elements.
How can i prevent to pass padding-top setting to the inner tables?
Use #first > tr > td
.
It means "a td that is a direct child of a tr that is a direct child of an element with ID 'first'".
There are 2 solutions.
One (the hard way), Specify padding values to the inner child elements so that it over-rides the parent style specifications.
Two (the above method), Use '#first > tr > td' but, it leads to cross browser comparability issues.
ie-6 does have a large share of the browser market.
精彩评论