HTML CSS examples for CSS Widget:Grid
create Chrome DevTool style bar charts with grids using plain CSS/HTML
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> table {<!-- w ww. java 2 s . c o m--> width:100%; } th, td { border-right:2px solid Chartreuse; border-bottom:2px solid yellow; width:21%; text-align:right; padding:0px; } td { vertical-align:top; } .grey-bg { background:blue; } .bar-row td { position:relative; height:0px; font-size:0px; border-width:0px; } .bar { background:pink; height:16px; position:absolute; top:-18px; } </style> </head> <body> <table cellspacing="0"> <tbody> <tr> <th>Lorem</th> <th>Lor</th> <th>Lor</th> <th>Lor</th> <th>Lore</th> </tr> <tr> <th rowspan="2">Lor</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="bar-row"> <td colspan="4"> <div style="width: 100%" class="bar"> <div></div> </div> </td> </tr> <tr class="grey-bg"> <th rowspan="2">Lo</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="bar-row"> <td colspan="4"> <div style="width: 80%" class="bar"> <div></div> </div> </td> </tr> <tr> <th rowspan="2">Lo</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="bar-row"> <td colspan="4"> <div style="width: 95%" class="bar"> <div></div> </div> </td> </tr> <tr class="grey-bg"> <th rowspan="2">Lo</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="bar-row"> <td colspan="4"> <div style="width: 18%" class="bar"> <div></div> </div> </td> </tr> <tr> <th rowspan="2">L</th> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="bar-row"> <td colspan="4"> <div style="width: 5%" class="bar"> <div></div> </div> </td> </tr> </tbody> </table> </body> </html>