删除 HTML table 中单元格周围的空白区域

Question

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

Answer 1

在将 table 添加到文档之前设置 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;
}

Answer 2

只需将 border-collapse: collapse 添加到您的 table 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>

删除 HTML table 中单元格周围的空白区域

remove empty spaces around cells in HTML table

html

javascript

css

html-table