Quiero construir una mesa de ajedrez con botones, aquí está el código con el que he creado la mesa:
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; }He intentado tantas opciones para eliminar este espacio entre filas y no pude encontrar una solución, gracias por su ayuda.
Es mejor usar el sistema de cuadrícula para hacer un tablero de ajedrez. El sistema de cuadrícula le brinda un mejor control y especificidad para varias opciones. Un ejemplo podría ser este:
<div class="wrapper"> <!-- for the top row you add 8 div here --> </div>Inmediatamente después de esta declaración HTML, debe declarar div siguiendo el número de celdas en el tablero de ajedrez. para el contenedor de clase, agregue este estilo CSS
display: grid; grid-gap: 0; grid-template-columns: repeat(8, 70px); grid-template-rows: 40px repeat(8, 70px) 40px; grid-auto-flow: row;Con el código actual agregue {border: none; border-radius: 0} en la entrada, agregue borde solo a "td" y elimine los bordes para "tr" y "table". Juega un poco con el color del borde.