提示：您可以先修改部分代碼再運行
<!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作柱形統計表 基於table的柱狀圖實現——dudo部落格 </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;height: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_img/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>某公司2007年1~4季度南北地區銷售情況對照表（單位：萬件）</caption><thead><tr><th></th><th class="north">北方</th><th class="south">南方</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>
提示：您可以先修改部分代碼再運行
