php - How to make a barlike chart but only with html and css -
i have database lots of records , have make foreach loop in order data. problem chart every data overload page. need make barlike chart using 2 divs , 1 div(the blue one) take percentage of main 1 (the grey div) accourding value data. did of don't know how make inner div build change it's percentage width according how close highest value in database. how fetch numbers shown in right.
<?php echo @$item->{"media_count"}; ?>
i attach image can see how need make like. barlike chart
<table class="table table-bordered"> <tbody style="width: 401px; border: 0;"> <?php foreach ($data->data->data $key => $item): if (@$item->{"name"}) { ?> <tr> <td> <?php echo @$item->{"name"}; ?> </td> <td> <div class="outer"> <div class="inner" style="width: 20%;"></div> </div> </td> <td> <?php echo @$item->{"media_count"}; ?> </td> </tr> <?php } endforeach ?> </tbody> </table>
is sort of layout looking for?
.outer, .inner { height: 20px; margin-bottom: 5px; } .outer { background-color: gray; width: 200px; } .inner { background-color: blue; }
<div class="outer"> <div class="inner" style="width: 20%;"></div> </div> <div class="outer"> <div class="inner" style="width: 40%;"></div> </div> <div class="outer"> <div class="inner" style="width: 60%;"></div> </div>