Removing spacing between HTML table rows and columns

Question

I am creating a table in which I want the elements to be connected at the borders(no spacing at all). However, there seems to be a small gap between the rows and the columns that I cannot remove.

Here is a visual of the html: https://jsfiddle.net/sy2h8t9c/ I have set the cellspacing, border-spacing, and cellpadding to 0.

HTML:

<table>
  <tr>
    <th><div></div></th>
    <th><div></div></th>
  </tr>
  <tr>
    <th><div></div></th>
    <th><div></div></th>
  </tr>
  <tr>
    <th><div></div></th>
    <th><div></div></th>
  </tr>
  <tr>
    <td><div></div></td>
    <td><div></div></td>
  </tr>
</table>

CSS:

table, th, td {
  border: none;
  margin:0px;
  cellspacing:0px;
  border-spacing:0px;
  cell-padding:0px;
}
div{
  width:5px;
  height:5px;
  background-color:black;
  display:block;
}

The current result is provided in the jsfiddle. I am trying to make it so that it appears to be a solid black box. Thank you for the help.

Answer 1

Add padding: 0; to your code

table, th, td {
  border: none;
  margin:0px;
  padding: 0;
  cellspacing:0px;
  border-spacing:0px;
  cell-padding:0px;
}

Answer 2

 cellspacing:0px; 

Remove this. There used to be an HTML attribute named cellspacing , but it was obsoleted by CSS two decades ago.

 cell-padding:0px; 

The property is called padding . There isn't a special version of it for tables. (There used to be an HTML attribute named cellpadding , but again, CSS came along in the '90s and it isn't needed any more).

 table, th, td { border: none; margin: 0px; padding: 0; border-spacing: 0px; } div { width: 5px; height: 5px; background-color: black; display: block; } 

 <table> <tr> <th> <div></div> </th> <th> <div></div> </th> </tr> <tr> <th> <div></div> </th> <th> <div></div> </th> </tr> <tr> <th> <div></div> </th> <th> <div></div> </th> </tr> <tr> <td> <div></div> </td> <td> <div></div> </td> </tr> </table>