石头的日志

<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:#adfe12 url(http://www.dudo.org/attachments/month_0805/l2008524151456.png) repeat-x scroll 0 0 !important;
    background:#adfe12 repeat-x scroll 0 0;
    position:relative;
    display:block;
  }
  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(http://www.dudo.org/attachments/month_0804/c2008428195153.gif) no-repeat 0 0;
  }
  th.south,td.south {
    left:80px;
    background:#ddd url(http://www.dudo.org/attachments/month_0804/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;
  }
  ul#ticks li {
    border-top:1px dotted #41a3e2;
    height:59px;
  }
  ul#ticks li:first-child {
    border:none;
  }
  ul#ticks li p {
    position:absolute;
    left:100%;
  }
</style>

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