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:

enter image description here

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

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -