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

阿努拉格·舒克拉

我正在尝试使用 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 解决方案。谢谢。

这样的

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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。