CSS padding for single TD inside a table

Question

I have a table, constructed like this:

<table>
<tr>  <td>1</td>  <td>2</td>  <td rowspan="4">3</td></tr>
<tr>  <td>4</td>  <td>5</td>                        </tr>
<tr>  <td>6</td>  <td>7</td>                        </tr>
<tr>  <td>8</td>  <td>9</td>                        </tr>
<tr height="100"><td colspan="2">10</td><td class="eleven">11</td> </tr>
</table>

Now the problem is within the last row. Whole row has a height set to 100px, so there is a plenty of room in TDs. In the very last TD I want to set an individual padding, so only the content "11" is padded from the top:

.eleven {
    padding-top:15px;
}

Setting this causes the problem - the first TD in this row also gets padding-top:10px; Why and how to make only the 2nd one padded?

Answer 1

Why don't you wrap the content you want to be padded into a <div> (onto which you will be applying the padding style) and put that <div> into the <td>?

<td>
    <div style="padding-top: 15px;"> 
        Content 
    </div> 
</td>