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;

删除此。 曾经使用是一个名为cellspacing的HTML属性，但是它在二十年前被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>

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

2 个答案: