CSS-заполнение для одного TD внутри таблицы

Question

У меня есть таблица, построенная так:

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

Теперь проблема в последнем ряду. Высота всего ряда равна 100px, поэтому в TD достаточно места. В самом последнем TD я хочу установить индивидуальный отступ, так что только содержимое «11» дополняется сверху:

.eleven {
    padding-top:15px;
}

Установка этого вызывает проблему - первый TD в этом ряду также получает padding-top: 10px; Почему и как сделать только 2-й подклад?

Answer 1

Почему бы вам не обернуть содержимое, которое вы хотите добавить, в <div> (к которому вы будете применять стиль заполнения) и поместить это <div> в <td>?

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

Answer 2

Хорошо, я выяснил, что вызвало проблему. Это была запись в небольшом фрагменте html5-css-reset, который я использую:

vertical-align:baseline;

присваивается обычно большинству общих элементов. Имея это в виду, теперь все работает как положено.