Chess Table Spacing - HTML,CSS , JS

Question

I wanna build a chess table with buttons, here is the code that I have created the table:

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

I have tried so many option to remove this spacing between rows and I couldn't find a solution, thanks for your help.

Board Image

Answer 1

It is better to use the grid system to make a chessboard. Grid system gives you better control and specificity for various options. An example could be this:

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

Right after this HTML declaration, you need to declare div following the number of the cells in the chessboard. for the class wrapper, add this CSS stylings

 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

With the current code add {border: none; border-radius: 0} {border: none; border-radius: 0} on the input, add border only to "td" and remove borders for "tr" and "table". Play around a bit with the border color.