How to fill color in border spacing between cells in HTML using CSS
15,168
Solution 1
Best way to do this would be to add a background color to the table and a 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>
Solution 2
The space between the cells is the table. You change the background of the table in the same way as any other element.
Watch out, the default background colour of the 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>
Author by
Inko Hagoed
Updated on June 10, 2022Comments
-
Inko Hagoed almost 2 years
I'm trying to fill black color between vertical cell spacing(columns) of a table in html but can't figure it out how to do it. 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>