table、div+css实现的柱状图表

最新推荐文章于 2024-01-22 09:38:45 发布

崔国瑞

最新推荐文章于 2024-01-22 09:38:45 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：教程文章标签： div table css class border stylesheet

本文链接：https://blog.youkuaiyun.com/yulin_xp/article/details/4340304

教程专栏收录该内容

8 篇文章

订阅专栏

此报表展示了四个季度内的发票开具金额与实际收款金额的情况对比。通过高度直观的条形图显示了每个季度的具体数额，并附带刻度标识以方便查看不同金额水平。报表还提供了各季度的详细数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果