html - Make table data corners touch -
i'm trying make chess board , having slight issue squares' appearances. checkerboard color scheme working correctly reason corners of each square don't seem touching.
here's snippet of code have 2 rows, each data entry either belongs class "light" or "dark":
<tr><td id="1"><span class="dark"></span></td><td id="2"><span class="light"></span></td><td id="3"><span class="dark"></span></td><td id="4"><span class="light"></span></td><td id="5"><span class="dark"></span></td><td id="6"><span class="light"></span></td><td id="7"><span class="dark"></span></td><td id="8"><span class="light"></span></td></tr> <tr><td id="9"><span class="light"></span></td><td id="10"><span class="dark"></span></td><td id="11"><span class="light"></span></td><td id="12"><span class="dark"></span></td><td id="13"><span class="light"></span></td><td id="14"><span class="dark"></span></td><td id="15"><span class="light"></span></td><td id="16"><span class="dark"></span></td></tr>
my css code looks this:
td { height:60px; width:60px; } table{ border:2px solid black; border-collapse: collapse; } span{ width: 100%; height: 100%; display: inline-block; } .light{ background-color: #f0f8ff; } .dark{ background-color: #8b4513; }
which produces table looks this:
i wondering if there's way clean of table, make corners of each color touch 1 another.
please add cellspacing="0" , cellpadding="0" table element, remove space in between.
Comments
Post a Comment