Question

如何给<tr>一个负余量来提升它？我正试图移动.small-item-block

<tr>
  <td class="item-name">Caprese</td>
  <td class="item-description">Fresh mozzarella, tomato, fresh basil and balsamic vinegar on a bed of spinach.</td>
  <td>$4.00</td>
  <td>$20.00</td>
</tr>
<tr class="small-item-block" >
  <td class="item-name"></td>
  <td class="item-addition-name">Add Bacon</td>
  <td class="item-addition-price">$1.00</td>
  <td class="item-addition-price">$3.00</td>
</tr>

CSS

tr.small-item-block  {
   margin-top: -10px;
   border-spacing: -10px;
}

这是JS Fiddle。

Answer 1

您无法移动tr，但您可以将td设置为position: relative，然后设置负top属性，例如：

tr.small-item-block td {
    position: relative;
    top: -10px;
}

这是您的小提琴更新：http://jsfiddle.net/L4gLM/2/

Answer 2

你实际上不能移动任何高于它上面一行的行，所以我认为你最好的选择是删除<td>内<tr>内的边距/填充。例如：

tr.small-item-block td {
  margin-top: 0;
  padding-top: 0;
}

表格行的负边距

2 个答案: