1

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

4

2 回答 2

1

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

于 2021-04-11T04:58:09.470 回答
1

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

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>

于 2021-04-11T05:03:24.283 回答