从表中分离最后一行答案

【问题标题】：Separate last row from table从表中分离最后一行
【发布时间】：2020-05-04 02:19:39
【问题描述】：

是否可以将表格的最后一行分开？我阅读了边框折叠和边框间距。这些将影响所有表格元素。我试图只分隔表格的最后一行。

出于说明目的：

<table>
    <tbody>
        <tr></tr>
        <tr></tr>
    </tbody>
    <tfoot>
        <tr></tr>
    </tfoot>
</table>

在上面给出的示例中，我还尝试通过将 tfoot 的显示覆盖到表格中来分隔它。但是，当它对我想要实现的前景造成更大的损害时。有什么我可以使用的 CSS 技巧吗？

注意*

我尝试了所有可能的技巧，想法是将 tfoot 与 tbody 分开。要求是 tfood 的背景为绿色，tbody 的背景色为蓝色。分开时，它应该在这两个标签之间显示一个白色空白。我已经像大多数人所说的那样实现了填充，但它没有起到作用。有什么想法吗？

问题解决了

基本上，我所做的是包含一个虚拟行并隐藏其边框。

【问题讨论】：

你能添加一个你想要实现的小线框吗？
在 tfoot 上使用 margin-top
@BhavyaSingh 边距对 tfoot 或 tbody 没有影响。
相关：stackoverflow.com/questions/4645406/…

标签： css

【解决方案1】：

如果你只是想在行之间创建一些空间，那么一个技巧是在 tfoot 中的单元格顶部有一些透明边框。

tfoot tr:first-child td {
  border-top: 1em solid transparent;
}

<table>
  <tbody>
    <tr>
      <td>data 1</td>
    </tr>
    <tr>
      <td>data 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>footer</td>
    </tr>
  </tfoot>
</table>

【讨论】：

谢谢，但它仍然不能解决问题。我以前尝试过这个解决方案。添加背景颜色时。它仍然显示一个白行
@user12521913 然后我认为您应该在问题中添加更多信息。你到底在寻找什么，你尝试过什么不起作用？我的意思是，你想让桌子看起来像两部分，身体的背景颜色显示在 tbody 和脚之间，而不是桌子的背景颜色？这样的细节很重要。
感谢您的建议，今后我将努力为我的问题提供信息。您所说的是正确的，我正在努力使桌子在两个地方看起来像它，我已经来了通过添加一个虚拟行并将其背景和颜色替换为无来解决问题。它可以解决问题，但我不确定这是否是正确的方法。

【解决方案2】：

如果它是您要使用css 定位的最后一个<tr> 元素，您可以执行以下操作：

<table id="my-table">
    <tbody>
        <tr></tr>
        <tr></tr>
    </tbody>
    <tfoot>
        <tr></tr>
    </tfoot>
</table>

#my-table tbody tr:last-child {
  border-top: 5px solid transparent;
}

如果你要定位的是tfoot元素中的<tr>元素：

#my-table tfoot tr {
  border-top: 5px solid transparent;
}

【讨论】：

我认为问题不在于如何选择最后一行，而是如何将其与表格的其余部分分开。
@RoToRa，您需要使用css 选择将其与其他元素分开的元素，不是吗？我已经更新了我的答案以包含一个 css 规则，它将分隔它。
边距不适用于表格行。
哎呀，我把它换成了border-top: 5px solid transparent;

【解决方案3】：

另一种方法是向tfoot 的td 添加填充：

tfoot tr td {padding-top: 100px;}

<table>
    <tbody>
        <tr><td>BLA</td><td>BLA</td><td>BLA</td><td>BLA</td></tr>
        <tr><td>YADA</td><td>YADA</td><td>YADA</td><td>YADA</td></tr>
    </tbody>
    <tfoot>
        <tr><td>LOOK AT ME</td><td>LOOK AT ME</td><td>LOOK AT ME</td></tr>
    </tfoot>
</table>

【讨论】：

【解决方案4】：

一种方法是有一个没有单元格的“间隙”行：

<table>
    <tbody>
        <tr><td>A</td><td>B</td></tr>
        <tr><td>C</td><td>D</td></tr>
    </tbody>
    <tfoot>
        <tr class="gap"></tr>
        <tr><td>1</td><td>2</td></tr>
    </tfoot>
</table>

td { 
    border: 1px solid black;
}

tr.gap {
    height: 1em;
}

【讨论】：

【解决方案5】：

要分隔表格的最后一个 td，您可以给 tr 的 td 的最后一个子元素填充。希望这会有所帮助。

table tfoot tr:last-child td{ padding-top:10px;}

<table>
  <tbody>
    <tr>
      <td>first</td>
    </tr>
    <tr>
      <td>second</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>last</td>
    </tr>
  </tfoot>
</table>

【讨论】：