Php 如何使用html和css制作条形图

我有一个包含大量记录的数据库，我必须进行foreach循环以获取所有数据。问题是每个数据的图表都会使页面过载。所以我需要用两个div和一个div（蓝色div）制作一个条形图，根据数据中的值计算出主div（灰色div）的百分比。我做了所有这些，但我不知道如何使内部div构建根据它与数据库中最高值的接近程度来更改其百分比宽度。这就是我获取右边显示的数字的方式

<?php echo @$item->{"media_count"}; ?>

我将附加一个图像，以便您可以看到我需要如何使它看起来像。

创建一个全宽div，设置高度和宽度，并将其涂成灰色。然后，在该div内，创建另一个没有边距的div，设置高度并将其涂成蓝色。将蓝色div的宽度设置为所需的宽度。

这是您正在寻找的布局类型吗

.outer、.inner{
高度：20px；
边缘底部：5px；
}
.外部{
背景颜色：灰色；
宽度：200px；
}
.内部{
背景颜色：蓝色；
}

---

您可以在相对定位的div内使用绝对定位，使条跟随外部div

.outerGraph{
位置：相对位置；
宽度：400px；
高度：200px；
背景色：#fff；
}
.价值{
位置：绝对位置；
高度：20px；
右：10px；
}
.酒吧{
位置：绝对位置；
背景颜色：蓝色；
高度：20px；
左：10px；
}
.bar1{
顶部：10px；
}
.bar2{
顶部：40px；
}
.bar3{
顶部：70像素；
}

88204
92784
100000

是的，有可能。。。。你试过什么吗？正如丹尼普提到的，你应该展示你的作品，并指出你的困境。我们不会为你做所有的工作。请首先诚实地尝试解决您的问题（展示您的工作），然后如果您遇到困难，我们可以提供帮助。好的，我有49项记录。如果我要使用javascript，那就太多了，所以我考虑使用html和css。我马上会发布一些代码。问题是我希望内部div的宽度与700.000的限制相比有所改变。I echo（）的值越接近该限制，得到内部div的宽度百分比就越大

      <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>
                    </td>
                    <td>
                        <?php echo @$item->{"media_count"}; ?>
                    </td>
                </tr>   
        <?php }
        endforeach ?>
        </tbody>
    </table>