Espaciado de la tabla de ajedrez – HTML, CSS, JS

Quiero construir una tabla de ajedrez con botones, aquí está el código que he creado para la tabla:

document.write('<h1>Bienvenido al juego de la Mesa de la Suerte</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;
}

He intentado varias opciones para eliminar este espacio entre las filas y no pude encontrar una solución, gracias por tu ayuda.

Imagen del tablero