example.html <html><head><link href="style.css" mce_href="style.css" rel="stylesheet" type="text/css" /></head><body> <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: 255px;"><p>$55555555</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> </body> </html> style.css <mce: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;} --></mce:style><style type="text/css" mce_bogus="1">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> 效果