纯css样式实现表格柱状图

准备好需要用到的图标。

新建html文档。

书写hmtl代码。

初始化css代码。

书写css代码。.histogram-container{position:relative;margin-left:60px;margin-top:10px;margin-bottom:25px;}.histogram-bg-line{border:#999 solid;border-width:0 1px 1px 1px;border-right-color:#eee;overflow:hidden;width:99%;}.histogram-bg-line ul{overflow:hidden;border:#eee solid;border-width:1px 0 0 0;}.histogram-bg-line li{float:left;width:20%;/*根据.histogram-bg-line下的ul里面li标签的个数来控制比例*/overflow:hidden;}.histogram-bg-line li div{border-right:1px #eee solid;}.histogram-content{position:absolute;left:0px;top:0;width:99%;height:100%;}.histogram-content ul{height:100%;}.histogram-content li{float:left;height:100%;width:20%;/*根据直方图的个数来控制这个width比例*/text-align:center;position:relative;}.histogram-box{position:relative;display:inline-block;height:100%;width:26px;}.histogram-content li a{position:absolute;bottom:0;right:0;display:block;width:30px;}.histogram-content li .name{position:absolute;bottom:-20px;left:0px;white-space:nowrap;display:inline-block;width:100%;font-size:12px;}.histogram-y{position:absolute;left:-60px;top:-10px;font:12px/1.8 verdana,arial;}.histogram-y li{text-align:right;width:55px;padding-right:5px;color:#333;}.histogram-bg-line li div,.histogram-y li{height:30px;/*控制单元格的高度及百分比的高度，使百分数与线条对齐*/}.histogram-box .aOne{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#a3c8fc,endColorStr=#5196d7); /*IE 6 7 8*/background: -ms-linear-gradient(top, #a3c8fc,  #5196d7);        /* IE 10 */background:-moz-linear-gradient(top,#a3c8fc,#f6f6f8);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#a3c8fc), to(#f6f6f8));/*谷歌*/ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a3c8fc), to(#5196d7));      /* Safari 4-5, Chrome 1-9*/background: -webkit-linear-gradient(top, #a3c8fc, #5196d7);   /*Safari5.1 Chrome 10+*/background: -o-linear-gradient(top, #a7cbfe, #5196d7);  /*Opera 11.10+*/}.histogram-box .aOne1{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#fea9a5,endColorStr=#d75d54); /*IE 6 7 8*/background: -ms-linear-gradient(top, #fea9a5,  #d75d54);        /* IE 10 */background:-moz-linear-gradient(top,#fea9a5,#d75d54);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#fea9a5), to(#d75d54));/*谷歌*/ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fea9a5), to(#d75d54));      /* Safari 4-5, Chrome 1-9*/background: -webkit-linear-gradient(top, #fea9a5, #d75d54);   /*Safari5.1 Chrome 10+*/background: -o-linear-gradient(top, #fea9a5, #d75d54);  /*Opera 11.10+*/}.histogram-box .aOne2{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ddf8aa,endColorStr=#b0d067); /*IE 6 7 8*/background: -ms-linear-gradient(top, #ddf8aa,  #b0d067);        /* IE 10 */background:-moz-linear-gradient(top,#ddf8aa,#b0d067);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ddf8aa), to(#b0d067));/*谷歌*/ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddf8aa), to(#b0d067));      /* Safari 4-5, Chrome 1-9*/background: -webkit-linear-gradient(top, #ddf8aa, #b0d067);   /*Safari5.1 Chrome 10+*/background: -o-linear-gradient(top, #ddf8aa, #b0d067);  /*Opera 11.10+*/}.histogram-bg-line div{ line-height:30px}.histogram-bg-line div img{ position:relative; top:3px; padding-left:10px}

代码整体结构。

查看效果。