Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Css + table as a column statistical table implementation of table-based column charts -- dudo blog</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css">* {Margin: 0; padding: 0;} body {padding: 0; margin: 40px; font-size: 9pt; font-family: Helvetica, Geneva, sans-serif ;} table # q-graph {width: 600px; height: 300px; caption-side: top; border: 2px solid # 0063be; background: transparent; position: relative; display: block; z-index: 2;} table # q-graph caption {width: 100%; position: absolute; top:-20px;} table # q-graph tbody tr, table # q-graph tbody th {position: absolute; width: 150px; heig Ht: 296px; vertical-align: top; bottom: 0; border-right: 1px dotted #41a3e2;} tr # q1 {left: 0;} tr # q2 {left: 149px;} tr # q3 {left: 298px;} tr # q4 {left: 447px; border-right: none;} td. bar {position: absolute; text-align: center; width: 34px; bottom: 0 ;. bottom: 2px; z-index: 2;} th. north, td. north {left: 36px; background: # ddd url (yun_qi_img/c2008428195153.gif) no-repeat 0 0;} th. south, td. south {left: 80px; background: # ddd url (yun_qi_im G/c2008428195153.gif) no-repeat-34px 0;} table # q-graph thead tr {bottom: auto; left: 100%; margin:-2.5em 0pt 0pt 5em; top: 50%; position: absolute;} table # q-graph thead th {width: 34px; position: absolute; left: 0; height: auto; color: # fff ;} table # q-graph thead th. north {top: 30px;} ul # ticks {list-style-type: none; width: 600px; position: relative; top:-300px; # top:-302px; z-index: 1; background: # adfe12;} ul # ticks li {border- Top: 1px dotted #41a3e2; height: 59px;} ul # ticks li: first-child {border: none;}. fix_IE {border: none! Important; # height: 45px! Important;} ul # ticks li p {position: absolute; left: 100% ;}</style> </head> <body> <table id="q-graph" cellspacing="0"><caption>A company from January 1, 2007 ~ 4. Comparison of sales in North and South regions in the quarter (unit: 10 thousand pieces)</caption><thead><tr><th></th><th class="north">North</th><th class="south">South China</th></tr></thead><tbody><tr id="q1"><th scope="row">Q1</th><td class="north bar" >18</td><td class="south bar" >16</td></tr><tr id="q2"><th scope="row">Q2</th><td class="north bar" >32</td><td class="south bar" >34</td></tr><tr id="q3"><th scope="row">Q3</th><td class="north bar" >43</td><td class="south bar" >32</td></tr><tr id="q4"><th scope="row">Q4</th><td class="north bar" >18</td><td class="south bar" >32</td></tr></tbody></table><ul id="ticks"> <li class="fix_IE"><p>50</p></li> <li><p>40</p></li> <li><p>30</p></li> <li><p>20</p></li> <li><p>10</p></li></ul></body></html>
Tip: you can modify some code before running
