How to fill color between cell spaces in HTML using CSS

Question

I am trying to fill the black color between the vertical cells (columns) of a table in html, but I cannot figure out how to do this. Here is my code

---

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>

Run codeHide result

Answer 1

The space between cells is a table. You change the background of the table just like any other element.

Beware, the default background color for table cells is transparent.

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>

Run codeHide result

Answer 2

The best way to do this is to add the background color to the table and the foreground color to the fields. See below

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>

Run codeHide result

Answer 3

css

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