如何使用 CSS 在 HTML 中的单元格之间的边框间距中填充颜色

Question

我正在尝试在 html 中表格的垂直单元格间距（列）之间填充黑色，但不知道该怎么做。这是我的代码

---

table,
th,
td {
  border-collapse: separate;
  border-spacing: 2px;
  border-style: solid;
  border-width: thin;
}

<table>
  <tr>
    <th>Heading One</th>
    <th>Heading Two</th>
    <th>Heading Three</th>
  </tr>

  <tr>
    <td>Apple</td>
    <td>10</td>
    <td>$1.0</td>
  </tr>

  <tr>
    <td>Mango</td>
    <td>12</td>
    <td>$2.0</td>
  </tr>
</table>

Answer 1

最好的方法是为表格添加背景色，为字段添加前景色。见下文

table, th, td
{
  border-collapse: separate;
    border-spacing:2px;
    border-style: solid;
    border-width:thin;
}
table{background:#000;}
tr{background: #fff;}

<table>
<tr><th>Heading One</th>
    <th>Heading Two </th>
    <th>Heading Three </th>
</tr>

<tr>
<td>Apple</td>
<td>10</td>
<td>$1.0</td>
</tr>

<tr>
<td>Mango</td>
<td>12</td>
<td>$2.0</td>
</tr>
</table>

Answer 2

单元格之间的空间就是表格。您可以像更改任何其他元素一样更改表格的背景。

请注意，表格单元格的默认背景颜色是透明的。

table,
th,
td {
  border-collapse: separate;
  border-spacing: 2px;
  border-style: solid;
  border-width: thin;
}

table {
   background-color: black;
}

td, th {
  background-color: white;
}

<table>
  <tr>
    <th>Heading One</th>
    <th>Heading Two</th>
    <th>Heading Three</th>
  </tr>

  <tr>
    <td>Apple</td>
    <td>10</td>
    <td>$1.0</td>
  </tr>

  <tr>
    <td>Mango</td>
    <td>12</td>
    <td>$2.0</td>
  </tr>
</table>