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

【问题标题】：Removing spacing between HTML table rows and columns删除 HTML 表格行和列之间的间距
【发布时间】：2019-07-14 07:53:17
【问题描述】：

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

这是 html 的视觉效果：https://jsfiddle.net/sy2h8t9c/ 我已将单元格间距、边框间距和单元格填充设置为 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 中提供。我正在努力使它看起来像一个坚固的黑盒子。谢谢你的帮助。

【问题讨论】：

标签： html css

【解决方案1】：

cellspacing:0px;

删除这个。曾经有一个名为 cellspacing 的 HTML 属性，但它在 20 年前就被 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>

【讨论】：

【解决方案2】：

将padding: 0; 添加到您的代码中

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

【讨论】：