table { width: 560px; height: 560px; border: 20px solid burlywood; } td { width: 70px; height: 70px; background-color: white; } .firstRow>td:nth-child(even) { background-color: black; border: none; } .secRow>td:nth-child(odd) { background-color: black; border: none; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chess</title> <link rel="stylesheet" href="Style.css"> </head> <body> <table > <tr class="firstRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="secRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="firstRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="secRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="firstRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="secRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="firstRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="secRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>

    2 answers 2

    Use the border-collapse parameter with the value = collapse .

     table { border-collapse: collapse; width: 560px; height: 560px; border: 20px solid burlywood; } td { width: 70px; height: 70px; background-color: white; } .firstRow>td:nth-child(even) { background-color: black; border: none; } .secRow>td:nth-child(odd) { background-color: black; border: none; } 
     <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chess</title> <link rel="stylesheet" href="Style.css"> </head> <body> <table > <tr class="firstRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="secRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="firstRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="secRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="firstRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="secRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="firstRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="secRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>

      Alternative solution to zero border-spacing

       table { width: 560px; height: 560px; border: 20px solid burlywood; border-spacing: 0; } td { width: 70px; height: 70px; background-color: white; } .firstRow>td:nth-child(even) { background-color: black; border: none; } .secRow>td:nth-child(odd) { background-color: black; border: none; } 
       <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chess</title> <link rel="stylesheet" href="Style.css"> </head> <body> <table> <tr class="firstRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="secRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="firstRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="secRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="firstRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="secRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="firstRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="secRow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>