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;

通常分配给大多数常见元素。考虑到这一点，现在一切都按照预期进行。

表中单个TD的CSS填充

2 个答案: