I am in the process of creating three tables.
<table id="first">
<tr>
<td>
1. CAPTION
</td>
</tr>
<tr>
<td>
<table id="second">
<tr>
<td>
2. CAPTION
</td>
</tr>
<tr>
<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>
My objective is to apply a padding of 10px (padding-top:10px) to the main table's td elements.
#first tr td
{
padding-top: 10px;
padding-left: 0pt;
}
However, I have encountered an issue where the padding is also affecting the inner tables' td elements.
How can I ensure that the padding-top setting does not affect the inner tables?