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

Question

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>

我需要一个像这样的 table 和一些基本信息，我将在其中添加一个按钮，单击该按钮可展开包含更多详细信息的该行。

我找不到正确的答案，所以我考虑更改 css 并在单击时过渡到 table 某些特定行的边距底部可能从 0 到 100px 并且然后找到那个 tr 的位置，然后说：

trPosition= 100px; trHeight= 30px;

tr 的底部位于：70px

并且一些新元素在该位置附加了 jquery，高度为 tr margin bottom。

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

还有其他解决方案吗？

Answer 1

Table 元素没有 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>

Answer 2

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

margin-bottom: 100px; display: block;

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

Why does margin-bottom not work with <tr>?

html

css

margin

padding

css-tables