CSS wyściółka dla pojedynczego TD wewnątrz tabeli

Question

Mam tabeli, skonstruowaną tak:

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

Teraz problem jest w ostatnim rzędzie. Cały rząd ma wysokość ustawioną na 100 pikseli, więc w TD jest dużo miejsca. W ostatniej TD Chcę ustawić indywidualny wyściółkę, więc tylko treść „11” napawa od góry:

.eleven { 
    padding-top:15px; 
} 

Ustawienie to powoduje problem - pierwszy TD w tym wierszu pojawia się również padding-top : 10 pikseli; Dlaczego i jak wykonać tylko drugi?

Answer 1

Ok, dowiedziałem się, co spowodowało problem. Był to wpis w małym fragmencie html5-css-reset, którego używam:

vertical-align:baseline; 

przypisany ogólnie do większości wspólnych elementów. Mając to na uwadze, teraz wszystko działa zgodnie z oczekiwaniami.

Answer 2

Dlaczego nie chcesz zawinąć zawartości, która ma być wypełniona, do <div> (na którą chcesz zastosować styl wypełnienia) i wstawić tę <div> do <td>?

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