为什么 margin-bottom 不适用于 <tr>？答案

【问题标题】：Why does margin-bottom not work with <tr>?为什么 margin-bottom 不适用于 <tr>？
【发布时间】：2018-01-21 11:51:27
【问题描述】：

tr {
  margin-bottom: 100px;
}

<table>
  <thead>
    <tr>
      <th>School Name</th>
      <th>State</th>
      <th>League</th>
      <th>Division</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>School1</td>
      <td>State1</td>
      <td>League1</td>
      <td>Division1</td>
    </tr>
  </tbody>
</table>

我需要一个这样的表格，其中包含一些基本信息，我将在其中添加一个按钮，单击该按钮可扩展该行并提供更多详细信息。

我找不到正确的答案，所以我想通过单击转换到表格来更改 css，其中某些特定行的边距底部可能从 0 到 100px，然后找到该 tr 的位置，然后说：

trPosition= 100 像素； trHeight= 30px;

tr的底部在：70px

并且一些新元素在该位置附加了 jquery，高度为 tr 边距底部。

但在此之前，我什至不能在行之间使用底部边距，这是为什么呢？

还有其他解决方案吗？

【问题讨论】：

标签： html css margin padding css-tables

【解决方案1】：

表格元素没有margin - 您可以在此处使用padding-bottom。另一件事是您需要将其应用于td 或th 元素。

请看下面的演示：

tr > td {
  padding-bottom: 100px;
}

<table>
  <thead>
    <tr>
      <th>School Name</th>
      <th>State</th>
      <th>League</th>
      <th>Division</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>School1</td>
      <td>State1</td>
      <td>League1</td>
      <td>Division1</td>
    </tr>
    <tr>
      <td>School1</td>
      <td>State1</td>
      <td>League1</td>
      <td>Division1</td>
    </tr>
  </tbody>
</table>

【讨论】：

嗯，这可以工作，我可以按高度获得位置 - padding-bottom 作为行高。很好的解决方案，谢谢！

【解决方案2】：

如果您更改块的显示，您会看到边距，但我不确定，如果这是您需要的。你应该使用不同的方法。

margin-bottom: 100px;显示：块；

【讨论】：