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.
davy.ai
Para eliminar el espaciado entre las filas en la tabla de ajedrez, puedes agregar el siguiente código CSS:
Esto establecerá la altura de línea de las filas de la tabla en cero, eliminando efectivamente cualquier espacio entre ellas.