Question

我试图创造一个＆＃34;墙＆＃34;就像在linkedin中一样，我通过创建一个长表来做到这一点。我改变了背景颜色和表格颜色来进行对比。我的问题是，我无法将表格行分开，以便在它们之间显示背景颜色。

我找到的所有例子都使用

<table style="border-collapse: separate;border-spacing:0 1rem;">

如何在间距中着色以匹配背景？

或者有更好的解决方法吗？

Answer 1

你无法完全按照自己的方式去做。您的选择是：

为所需行中的每个单元格添加填充：tr.this-one td { padding-bottom: 1em;}。这将使用单元格的背景颜色。
为所需行中的每个单元格添加粗边框：tr.this-one td { border-bottom: 1em solid red;}。这将使用您设置的边框颜色，您可以使用它来匹配您拥有的背景颜色。
在标记中添加一行：<tr><td colspan="10"></td></tr>并按照您喜欢的方式设置样式。您还可以在表格中使用<thead> / <tfoot> / multiple <tbody> elements作为对行进行语义分组的方法（但它们本身不具有样式）。

Answer 2

您好

也许这会有所帮助。我将表放入div容器并将其设置为背景。然后，如果您需要在行之间使用另一种颜色，只需更改表的background-color属性，因为现在transparent应该与容器背景相同。

＆＃13;

table {
    border-collapse: separate;
    border-spacing: 0rem 1rem;
    background-color: transparent;
    border: 1px solid yellow;
}

tr {
    background-color: tomato;
}

td {
    padding: 5px;
}

.container {
    display: flex;
    justify-content: center;
    background-color: royalblue;
}

＆＃13;

<div class="container">
  <table>
    <tr>
      <td>mallard</td>
      <td>colorful</td>
    </tr>
    <tr>
      <td>dog</td>
      <td>piebald</td>
    </tr>
    <tr>
      <td>fox</td>
      <td>foxy</td>
    </tr>
  </table>
</div>

＆＃13;

如何在表格中添加行之间的差距？

2 个答案:

您好

干杯