Chess Table Spacing - HTML,CSS , JS-CodePudding

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"  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

CodePudding user response：

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

CodePudding user response：

With the current code add {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.