padding CSS per singola TD all'interno di una tabella

Question

Ho una tabella, costruita in questo modo:

<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> 

Ora il problema è dentro l'ultima riga. Tutta la riga ha un'altezza impostata su 100 px, quindi c'è molto spazio nei TD. In ultimo TD voglio impostare un'imbottitura individuale, in modo che solo il contenuto "11" è imbottita dall'alto:

.eleven { 
    padding-top:15px; 
} 

L'impostazione di questa causa il problema - il primo TD in questa riga ottiene anche padding-top : 10px; Perché e come rendere solo il 2 ° imbottito?

Answer 1

Ok, ho scoperto che cosa ha causato il problema. Era una voce in un piccolo frammento di HTML5-css-reset che uso:

vertical-align:baseline; 

assegnato in generale per la maggior parte degli elementi comuni. Tenendo presente questo, ora tutto funziona come dovrebbe.

Answer 2

Perché non avvolgere il contenuto che si desidera riempire in uno (sul quale si applicherà lo stile di riempimento) e inserire lo <div> nello <td>?

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