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

Question

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>

Answer 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>

Answer 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>

Answer 3

From another approach, the border-collapse doesn't have to be separated, collapse value also works. The size of the border can be changed by changing the value of border-width .

 table, th, td { border-collapse: collapse; border-width: 4px; border-style: solid; border-color: #000; } tr{background: #eee;}

 <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>

Updated on May 13th, 2021

As I have read through the book CSS Mastery Advanced Web Standards Solution, 3rd 3, the book has mentioned in ch9 that using border-collapse: collapse; can result empty spacing on vertical border using IE/Edge.

Answer 4

Add the below css and try,

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