删除HTML表格行和列之间的间距

Question

我正在创建一个表格，我希望其中的元素在边界处连接（根本没有间距）。 但是，行和列之间似乎有一个很小的间隙，我无法删除。

这是html的外观： https : //jsfiddle.net/sy2h8t9c/我已将cellpacing，border-spacing和cellpadding设置为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;
}

当前结果在jsfiddle中提供。 我正在尝试使其看起来像一个纯黑框。 感谢您的帮助。

Answer 1

添加padding: 0; 到你的代码

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

Answer 2

 cellspacing:0px; 

删除它。 曾经有一个名为HTML属性cellspacing ，但它是由CSS二十年前废弃。

 cell-padding:0px; 

该属性称为padding 。 它没有用于表的特殊版本。 （曾经有一个名为cellpadding的HTML属性，但是同样，CSS在90年代问世，不再需要了）。

 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>