删除 HTML 表格中单元格周围的空格答案

【问题标题】：remove empty spaces around cells in HTML table删除 HTML 表格中单元格周围的空格
【发布时间】：2021-07-06 13:01:57
【问题描述】：

我正在尝试使用 HTML 和 JS 制作棋盘。为此，我正在使用 HTML 表格。但我不知道为什么，但每个单元格周围都有空格。
我试过cell-spacing:0;，但它似乎不起作用。\

查看单元格周围的红色背景。这是代码

var table = document.createElement("table");
table.id = "board";
table.classList.add = "div2";
for (var i = 1; i < 9; i++) {
  var tr = document.createElement('tr');
  for (var j = 1; j < 9; j++) {
    var td = document.createElement('td');
    if (i % 2 == j % 2) {
      td.className = "white";
    } else {
      td.className = "black";
    }
    tr.appendChild(td);
    td.innerHTML += td.cellIndex + 1;
  }
  table.appendChild(tr);
}
document.body.appendChild(table);

* {
  margin: 0;
  padding: 0;
}

body {
  background: red;
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: scroll;
}

.black {
  background: #769656;
}

.white {
  background: #eeeed2;
}

table {
  border: 2px solid red;
  width: 95vw;
  cell-spacing: 0;
  cell-padding: 0;
  height: 95vw;
}

.div2 {
  width: 95vw;
  height: 95vw;
}

我更喜欢 javascript 或 css 解决方案。谢谢。

【问题讨论】：

标签： javascript html css html-table

【解决方案1】：

只需将 border-collapse: collapse 添加到您的表格 CSS 中：

var table = document.createElement("table");
table.id = "board";
table.classList.add = "div2";
for (var i = 1; i < 9; i++) {
  var tr = document.createElement('tr');
  for (var j = 1; j < 9; j++) {
    var td = document.createElement('td');
    if (i % 2 == j % 2) {
      td.className = "white";
    } else {
      td.className = "black";
    }
    tr.appendChild(td);
    td.innerHTML += td.cellIndex + 1;
  }
  table.appendChild(tr);
}
document.body.appendChild(table);

* {
  margin: 0;
  padding: 0;
}

body {
  background: red;
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: scroll;
}

.black {
  background: #769656;
}

.white {
  background: #eeeed2;
}

table {
  border: 2px solid red;
  border-collapse: collapse;
  width: 95vw;
  height: 95vw;
}

td {
  text-align: center;
}

.div2 {
  width: 95vw;
  height: 95vw;
}

<!DOCTYPE html>
<html>
<head>
  <title>Title</title>
</head>

<body>
</body>
</html>

【讨论】：

【解决方案2】：

在将表格添加到文档之前设置table.cellSpacing = 0;：

var table = document.createElement("table");
table.id = "board";

table.cellSpacing = 0;

table.classList.add = "div2";
for (var i = 1; i < 9; i++) {
  var tr = document.createElement('tr');
  for (var j = 1; j < 9; j++) {
    var td = document.createElement('td');
    if (i % 2 == j % 2) {
      td.className = "white";
    } else {
      td.className = "black";
    }
    tr.appendChild(td);
    td.innerHTML += td.cellIndex + 1;
  }
  table.appendChild(tr);
}
document.body.appendChild(table);

* {
  margin: 0;
  padding: 0;
}

body {
  background: red;
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: scroll;
}

.black {
  background: #769656;
}

.white {
  background: #eeeed2;
}

table {
  border: 2px solid red;
  width: 95vw;
  cell-spacing: 0;
  cell-padding: 0;
  height: 95vw;
}

.div2 {
  width: 95vw;
  height: 95vw;
}

【讨论】：