表中单个TD的CSS填充

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也会获得填充顶部:10px; 为什么以及如何只填充第二个？

Answer 1

为什么不将你想要填充的内容包装成<div>(你将应用填充样式)并将其<div>放入<td>？

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

Answer 2

好的,我发现了导致问题的原因.这是我使用的一个小html5-css-reset片段中的一个条目:

vertical-align:baseline;

通常分配给大多数共同元素.考虑到这一点,现在一切都按照预期运作.