用CSS实现柱状图(Bar Graph)的方法(四)—table实现复杂柱状图(3)
作者:dudo 来源:dudo博客 时间:2008-05-28 12:55:00
三、接下来,我们要按照季度分类
根据XHTML中的设计,我们使用<tr>来代表季度,<td>代表南北区域,<th>代表<td>中内容属于哪个<tr>。同时我们还注意到,我们不能直接为<tr>设定边框样式,因为它没有边框(只有<table>、<td>、<th>等有)。不过我们可以为<th>设置一个边框:
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>元素都重合在了一起,我们使用绝对定位把它们在同一行上分布:
tr#q1 {left:0;}
tr#q2 {left:149px;}
tr#q3 {left:298px;}
tr#q4 {left:447px;border-right:none;}
查看演示页面:Bar-Graph-2.htm
四、进一步设定<td>样式
前行让所有的单元格底部对齐:
td.bar{
position:absolute;
text-align:center;
width:34px;
bottom:0;
z-index:2;
}
然后设置背景和位置:
td.north {
left:36px;
background:#ddd url(bars_v.gif) no-repeat 0 0;
}
td.south {
left:80px;
background:#ddd url(bars_v.gif) no-repeat -34px 0;
}
查看演示页面:Bar-Graph-3.htm
五、对于<thead>的处理
<thead>是用来看作图例的,我们只需要把它放在表格一侧即可。为了让它们也有相应的背景,我们可以在上面这段css代码的td.north和td.south前面分别加上 th.north和th.south,有半角逗号(,)隔开即可。下面使用CSS来改变<thead>的位置:
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;}
把<thead>移到一侧,我们使用也是绝对定位,设置left:100%,如果不想使它紧挨表格,可以再通过margin来设置。当然也可以直接使用left:105%等来设置;bottom:auto;是取消从父元素继承来的bottom:0的属性。
top:50%是用来设置垂直居中的。一般来说,绝对定位中使用top:50%是使上边缘正好处于垂直居中的位置,我们还要使用负的margin值来上移一半的高度使整个元素垂直居中。这也是我们在页面布局经常用到的一种元素居中方法;
至此我们柱状图效果基本完成了。但是在Internet Explrore中,我们发现柱状图的底部并没有和表格实际对齐,这是因为在IE中默认表格样式中边框和内容之间留有一定的空白,我们可以通过设定<table>的CSS属性border-spacing:0来实现,不过可惜的是Internet Explorer中并不起作用,所以我们还要直接为<table>元素增加一个cellspacing的属性,即<table id="q-graph" cellspacing="0">...</table>
查看演示页面:Bar-Graph-4.htm