cristi2050 cristi2050 - 6 months ago 5
HTML Question

How to make a barlike chart but only with html and css

I have a database with lots of records and I have to make a foreach loop in order to get all that data. The problem is that a chart for every data would overload the page. So I need to make a barlike chart using two divs and one div(the blue one) to take percentage of the main one (the grey div) accourding to the value from that data. I will attach an image so you can see how I need to make it look like.
barlike chart

<table class="table table-bordered">
<tbody style="width: 401px; border: 0;">
<?php foreach ($data->data->data as $key => $item):
if (@$item->{"name"}) {
?>
<tr>
<td>
<?php echo @$item->{"name"}; ?>
</td>
<td>
<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>
</td>
<td>
<?php echo @$item->{"media_count"}; ?>
</td>
</tr>
<?php }
endforeach ?>
</tbody>
</table>

Answer

Is this the sort of layout you are 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>

Comments