用CSS实现柱状图（Bar Graph）的方法（四）—table实现复杂柱状图（3）

三、接下来，我们要按照季度分类

根据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