Simple CSS Bar Graphs
00
Categories:
Price:free
tml { font-size: 100%; /* little IE trick */ }body { font: 0.75em Arial, Helvetica, sans-serif; }table { font-size: 100%; /* little IE trick */ }table#normal { border-collapse: collapse; }table#normal td, table#normal th { border: 1px solid #000; }table#styled { width: 40em; margin:0 0 2em 0; padding: 0 0 0 5em; /* enough left padding for the row headings */}table#styled * { margin: 0; padding: 0; }table#styled caption { font-size: 1.5em; font-weight: bold; text-align: left; }table#styled thead th {display: none; }table#styled thead th+th { display: block; text-align: left; }table#styled tbody tr { display: block; width: 100%; background: #eee; margin-bottom: 2px; position: relative; }table#styled tbody th { display: block; position: absolute; right: 100%; width: 5em; }table#styled tbody td { display: block; background: #ccf; text-align: right; margin-right: 0.2em; }</style><link rel="home" title="splintered home page" href="/" /><link rel="up" title="splintered experiments" href="/experiments/" /></head><body><table id="styled"> <caption><acronym title="Cascading Style Sheets">CSS</acronym> bar graphs</caption> <thead> <tr> <th scope="col"> </ th> <th scope="col">completed</t h> </tr> </thead> <tbody> <tr> <th scope="row">project 1</th> <td style="width:20%">20%</t d> </tr> <tr> <th scope="row">project 2</th> <td style="width:25%">25%</t d> </tr> <tr> <th scope="row">project 3</th> <td style="width:100%">100%< /td> </tr> <tr> <th scope="row">project 4</th> <td style="width:5%">5%</td& gt; </tr> <tr> <th scope="row">project 5</th> <td style="width:25%">25%</t d> </tr> <tr> <th scope="row">project 6</th> <td style="width:50%">50%</t d> </tr> </tbody></table>
Comments
Post new comment