统计表中百分比的表示方法

特殊的百分比

以往大家在某些统计表中的百分比是怎样的
一般是这样

最近在做统计表，需求要做成这样

在经过不断调试之后，给大家总结了方法（完全css）
首先是css样式

<style type="text/css"> 
     .graph {
            position: relative;
            height: 2em;
        }
        .graph .bar {
            display: block;
            position: relative;
            text-align: left;
            color: #333;
            height: 7px;
            top:20px;
            line-height: 1px;
        }
        .ssr{
            text-align: left;
            line-height:8px;
        }
</style>

接下来就是html了（没错，我是写php的）

<div class="data-table">
    <table class="table table-bordered table-condensed table-hover ">
        <tbody>
        <?php foreach ($tableData as $key=>$row){?>
            <tr>
                <?php foreach ($tableHeader as $rowKey=>$rowHeader){?>
                    <td style="clear:both;padding: 0;">
                        <?php if(in_array($rowKey,$rateParams)){ ?>
                            <div class="graph" style="border: 1px solid #FFFFFF;"><strong class="bar" style="font-weight:normal;width:<?php $rate = explode('_',$row[$rowKey]); echo $rate[1] ?>;background: #0099CC;"></strong><p class="ssr"><?php $rate = explode('_',$row[$rowKey]);echo $rate[0].'('.$rate[1].')';?></p></div>
                        <?php }else{?>
                            <div class="graph" style="border: 1px solid #FFFFFF;"><strong class="bar" style="font-weight:normal;"></strong><p class="ssr"><?php echo $row[$rowKey];?></p></div>
                        <?php }?>
                    </td>
                <?php }?>
            </tr>
        <?php }?>
        </tbody>
    </table>
</div>

总体会与上图有出入，你只要慢慢调css就ok了，下图是我做的例子