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