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, поэтому в TDs много места. В самом последней TD я хочу, чтобы установить индивидуальные отступы, поэтому только содержание «11» заполняются сверху:

.eleven { 
    padding-top:15px; 
} 

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

Answer 1

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

vertical-align:baseline; 

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

Answer 2

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

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