免费模板网
当前位置: 首页>CSS图表> table、div+css实现的柱状图表

CSS图表

table、div+css实现的柱状图表

分类:CSS图表 时间:2009/6/5 15:35:30 浏览:7047 次

演示效果截图

 table、div+css实现的柱状图表

CSS代码

<style type="text/css">
html {background: #909AA9;}
body {background: #FFF; margin: 0 5%; padding: 1em;
  border: 3px solid gray; border-width: 0 3px;}
h1 {font: bold 2em/0.85 Arial, sans-serif; 
  text-align: center; letter-spacing: 1px;
  margin: 1em -0.5em; padding: 0 0.5em;
  border-bottom: 2px solid gray;}
#q-graph {display: block;
  position: relative; width: 600px; height: 300px;
  margin: 1.1em 0 0; padding: 0;
  background: #DDD repeat-x;
  border: 2px solid gray;
  font: 9px Helvetica, Geneva, sans-serif;}
#q-graph caption {caption-side: top; width: 600px;
  position: relative; z-index: 10;
  font-weight: bold;font-size:24px;}
#q-graph tr, #q-graph th, #q-graph td { 
  position: absolute;
  bottom: 0; width: 150px; z-index: 2;
  margin: 0; padding: 0;
  text-align: center;}
#q-graph thead tr {left: 100%; top: 50%; bottom: auto;
  margin: -2.5em 0 0 5em;}
#q-graph thead th {width: 7.5em; height: auto; padding: 0.5em 1em;}
#q-graph thead th.sent {top: 0; left: 0; border: 1px solid;}
#q-graph thead th.paid {top: 2.75em; left: 0; border: 1px solid;}
#q-graph tbody tr {height: 296px; padding-top: 2px;
  border-right: 1px dotted #C4C4C4; color: #AAA;}
#q-graph #q1 {left: 0;}
#q-graph #q2 {left: 150px;}
#q-graph #q3 {left: 300px;}
#q-graph #q4 {left: 450px; border-right: none;}
#q-graph tbody th {top: 0.75em; vertical-align: top;}
#q-graph .bar {width: 60px; border: 1px solid;
border-bottom: none; color: #000;}
#q-graph .bar p {margin: 5px 0 0; padding: 0;}
#q-graph .sent {left: 13px; background: #DCA repeat-x;
  border-color: #EDC #BA9 #000 #EDC;}
#q-graph .paid {left: 77px; background: #9D9 repeat-x;
  border-color: #CDC #9B9 #000 #BFB;}
#ticks {position: relative; top: -300px; left: 2px;
  width: 596px; height: 300px; z-index: 1;
  margin-bottom: -300px;
  font: 9px Helvetica, Geneva, sans-serif;}
#ticks .tick {position: relative; border-bottom: 1px solid #BBB;
width: 600px;}
#ticks .tick p {position: absolute; left: 100%; top: -0.67em;
margin: 0 0 0 0.5em;}
</style>

HTML代码

<table id="q-graph">
<caption>www.865171.cn</caption>
<thead>
<tr>
<th></th>
<th class="sent">Invoiced</th>
<th class="paid">Collected</th>
</tr>
</thead>
<tbody>
<tr class="qtr" id="q1">
<th scope="row">Q1</th>
<td class="sent bar" style="height: 111px;"><p>$18,450.00</p></td>
<td class="paid bar" style="height: 99px;"><p>$16,500.00</p></td>
</tr>
<tr class="qtr" id="q2">
<th scope="row">Q2</th>
<td class="sent bar" style="height: 206px;"><p>$34,340.72</p></td>
<td class="paid bar" style="height: 194px;"><p>$32,340.72</p></td>
</tr>
<tr class="qtr" id="q3">
<th scope="row">Q3</th>
<td class="sent bar" style="height: 259px;"><p>$43,145.52</p></td>
<td class="paid bar" style="height: 193px;"><p>$32,225.52</p></td>
</tr>
<tr class="qtr" id="q4">
<th scope="row">Q4</th>
<td class="sent bar" style="height: 110px;"><p>$18,415.96</p></td>
<td class="paid bar" style="height: 195px;"><p>$32,425.00</p></td>
</tr>
</tbody>
</table>
<div id="ticks">
<div class="tick" style="height: 59px;"><p>$50,000</p></div>
<div class="tick" style="height: 59px;"><p>$40,000</p></div>
<div class="tick" style="height: 59px;"><p>$30,000</p></div>
<div class="tick" style="height: 59px;"><p>$20,000</p></div>
<div class="tick" style="height: 59px;"><p>$10,000</p></div>
</div>

上一篇:彩色12个月CSS月统计图表

下一篇:CSS控制背景图片产生的图表效果

站长常用工具

最新图表

热门图表

赞助商链接