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

特殊的百分比

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

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

在经过不断调试之后，给大家总结了方法（完全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>
         foreach ($tableData as $key=>$row){?>
            <tr>
                 foreach ($tableHeader as $rowKey=>$rowHeader){?>
                    <td style="clear:both;padding: 0;">
                         if(in_array($rowKey,$rateParams)){ ?>
                            <div class="graph" style="border: 1px solid #FFFFFF;"><strong class="bar" style="font-weight:normal;width:;background: #0099CC;">strong><p class="ssr"> $rate = explode('_',$row[$rowKey]);echo $rate[0].'('.$rate[1].')';?>p>div>
                         }else{?>
                            <div class="graph" style="border: 1px solid #FFFFFF;"><strong class="bar" style="font-weight:normal;">strong><p class="ssr"> echo $row[$rowKey];?>p>div>
                         }?>
                    td>
                 }?>
            tr>
         }?>
        tbody>
    table>
div>

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