Question

我正在尝试创建一个html表，并在这里遇到问题。

我希望指定一个特定的行没有CSS填充。

HTML

<table cellpadding="10" cellspacing="5">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$810</td>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$810</td>
  </tr>
</table>

CSS

table, th, td {
    border:solid 1px red;
}

table {
     border-collapse: inherit;
     border-spacing: 5px;    
}

http://jsfiddle.net/3rL9dryp/1/

在jsFiddle中，表中的所有行都有填充到上面的行。我想保留每行的填充，但需要将顶部填充删除到上一行（例如，第三行）。这可行吗？

非常感谢！

Answer 1

您可以使用CSS3伪选择器:nth-child：

table tr:nth-child(3) td {
    padding-top: 0;
}

Answer 2

以下是代码工作的示例。我添加padding-top:100px来强调差异。 http://jsfiddle.net/m704mxz6/1/

将其更改为padding-top:0px;以实现目标。

如何在我的情况下删除表填充

2 个答案: