Adding CSS for a single TD inside a table

Question

I have a table built 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 on the last line. The entire line has a height of 100px, so TDs has a lot of space. In the latest TD, I want to install an individual add-on, so only the contents of "11" are padded on top:

 .eleven { padding-top:15px; } 

Setting this causes a problem - the first TD on this line also gets padding-top: 10px; Why and how to make only the second filled?

Answer 1

Ok, I found out what caused the problem. This was an entry in a small html5-css- reset snippet that I am using:

 vertical-align:baseline; 

assigned usually to most common elements. With that in mind, now everything works as intended.

Answer 2

Why don't you wrap the content that you want to add to the <div> (onto which you will apply the fill style) and put that <div> in the <td> ?

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