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

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>

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

标签： htmlcss

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>