国际象棋表间距 - HTML,CSS, JS

Question

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

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

我已经尝试了很多选项来删除行之间的间距，但我找不到解决方案，感谢您的帮助。

董事会形象

Answer 1

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

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

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

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

Answer 2

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