HTML CSS examples for CSS Widget:Table Layout
Make table data corners touch
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- www .j a v a2 s .c o m--> padding:6px; } td { height:61px; width:61px; padding:0px; display:inline-block; overflow:hidden; } table { border:2px solid Chartreuse; } span { width:100%; height:100%; display:inline-block; } .light { background-color:yellow; } .dark { background-color:blue; } </style> </head> <body> <table cellspacing="0" cellpadding="0"> <tbody> <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> </tbody> </table> </body> </html>