为表格中的单元格之间的空间着色

Question

如何用不同的颜色为表格中的单元格之间的空间着色？我对结果应该如何做了一个图片：

我尝试使用此代码：

 body {
  padding: 50px;
  text-align: center;
  font-size: 15pt;
}

table td{
  margin: 5px;
}

tr.BorderBottom td{
  border-bottom: 2px solid black;
}

.Orange{
  background-color: orange;  
  }
.Green{
  background-color: green;
}
.LeftGreen{
  background: linear-gradient(to right, green 50%, orange 50%);
  }
.RightGreen{
  background: linear-gradient(to right, orange 50%, green 50%);
  }

<table>
  <tr class="BorderBottom">
    <td>
    <div class="RightGreen">One</div>
    </td>
    <td>
    <div class="Green">Two</div>
    </td>
    <td>
    <div class="Green">Three</div>
    </td>
    <td>
      <div class="LeftGreen">Four</div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="LeftGreen">Five</div>
    </td>
    <td>
      <div class="Orange">Six</div>
    </td>
    <td>
      <div class="Orange">Seven</div>
    </td>
    <td>
      <div class="RightGreen">Eight</div>
    </td>
  </tr>
  
</table>

但是如您所见，我不知道如何为单元格之间的空间着色。两行之间的黑色边框不连续。

Answer 1

将cellspacing="0" cellpadding="0"添加到您的html，因此所有空格将被重置。然后使用简单的填充重新添加单元格之间的空间，例如在div元素中：

body {
  padding: 50px;
  text-align: center;
  font-size: 15pt;
}

table td{
  border-collapse: collapse;
}

table tr > td > div {
  padding: 5px;
}

tr.BorderBottom td{
  border-bottom: 2px solid black;
}

.Orange{
  background-color: orange;  
  }
.Green{
  background-color: green;
}
.LeftGreen{
  background: linear-gradient(to right, green 50%, orange 50%);
  }
.RightGreen{
  background: linear-gradient(to right, orange 50%, green 50%);
  }

<table cellspacing="0" cellpadding="0">
  <tr class="BorderBottom">
    <td>
    <div class="RightGreen">One</div>
    </td>
    <td>
    <div class="Green">Two</div>
    </td>
    <td>
    <div class="Green">Three</div>
    </td>
    <td>
      <div class="LeftGreen">Four</div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="LeftGreen">Five</div>
    </td>
    <td>
      <div class="Orange">Six</div>
    </td>
    <td>
      <div class="Orange">Seven</div>
    </td>
    <td>
      <div class="RightGreen">Eight</div>
    </td>
  </tr>
  
</table>