 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| table+css实现柱状图 |
| 来源：轩魂国度 更新时间：2009/5/12 17:06:10 阅读次数： 我要投稿 |
|
<!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> 基于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(/effects/UploadFiles_7074/201008/2010082715171862.gif) no-repeat 0 0;
}
th.south,td.south {
left:80px;
background:#ddd url(/effects/UploadFiles_7074/201008/2010082715171862.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" style="height:111px">18</td>
<td class="south bar" style="height:99px">16</td>
</tr>
<tr id="q2">
<th scope="row">Q2</th>
<td class="north bar" style="height:198px">32</td>
<td class="south bar" style="height:210px">34</td>
</tr>
<tr id="q3">
<th scope="row">Q3</th>
<td class="north bar" style="height:260px">43</td>
<td class="south bar" style="height:198px">32</td>
</tr>
<tr id="q4">
<th scope="row">Q4</th>
<td class="north bar" style="height:111px">18</td>
<td class="south bar" style="height:198px">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> |
| 特效说明： |
table+css实现柱状图
用到的图片：
|
|
| 上一篇文章： 在网页上显示QQ是否在线下一篇文章： 简易的网页FLASH播放器 |
|
|
|
注册 登录
