国际象棋表格间距 - HTML，CSS，JS答案

【问题标题】：Chess Table Spacing - HTML,CSS , JS国际象棋表格间距 - HTML，CSS，JS
【发布时间】：2022-01-01 14:53:25
【问题描述】：

我想用按钮构建一个国际象棋桌，这是我创建表的代码：

document.write('<h1>Welcome to Lucky Table game</h1><table>');
var cell_id = 0;
for (var i = 0; i < 8; i++) {
  document.write('<tr>');
  for (var j = 0; j < 8; j += 2) {
    cell_id = i * 8 + j + 1;
    document.write('<td><input type="button" class="black" onclick="playTheGame(\'a' + cell_id + '\')" id ="a' + cell_id + '" /></td > ');
    cell_id++;
    document.write('<td><input type="button" onclick="playTheGame(\'a' + cell_id + '\')" id="a' + cell_id + '"/></td>');
  }
  document.write("</tr>");
}
document.write("</table>");

input {
  width: 40px;
  height: 40px;
}

.black {
  background-color: black;
}

table {
  border-collapse: collapse;
  column-gap: 100px;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 0;
  padding: 0;
  /margin: 0;
  / border: none;
}

td,
tr {
  border-collapse: collapse;
  border: 1px solid;
  padding: 0;
}

h1 {
  text-align: center;
  color: green;
}

我尝试了很多方法来消除行间距，但我找不到解决方案，感谢您的帮助。

Board Image

【问题讨论】：

你用的是什么浏览器？我用 Chrome 测试了你的代码，行之间没有间距
在 Firefox 上测试也没有空间。 CSS 注释代码块应该是 /* ... */ 而不是 / ... /
我建议使用 8x8 grid-container 而不是 <table>，这在十多年来确实不可取。此外，您可以使容器本身可点击，这样您就不必添加按钮。

标签： javascript html css html-table

【解决方案1】：

最好使用网格系统来制作棋盘。网格系统为您提供更好的控制和各种选项的特异性。一个例子可能是这样的：

<div class="wrapper">
  <!-- for the top row you add 8 div here -->
  
</div>

在此 HTML 声明之后，您需要根据棋盘中单元格的数量声明 div。 对于类包装器，添加此 CSS 样式

 display: grid;
 grid-gap: 0;
 grid-template-columns: repeat(8, 70px);
 grid-template-rows: 40px repeat(8, 70px) 40px;
 grid-auto-flow: row;

【讨论】：

【解决方案2】：

使用当前代码在输入上添加{border: none; border-radius: 0}，只为“td”添加边框并删除“tr”和“table”的边框。稍微调整一下边框颜色。

【讨论】：