Dompdf相对/绝对定位项目的百分比不符合预期

我在laravel中使用dompdf,在我的PDF中有一部分我需要使用传入blade的变量创建一个图。

我有一个计算,把这个变量转换成它最大值的一个百分比:

$bar_percentage = (($bar - 5) * 100) / (20);

结果是,我有一个百分比,我需要在条形图中创建一个条形的高度。当我们直接使用wkhtmltopdf时,我以前使用flexbox有一种不同的方法,但是在不同的环境中这是有问题的,所以我们添加了dompdf,我需要重构pdf刀片以使用表。我的想法是使用一个3行表格创建图形的背景,并将条形图绝对地放置在其中,类似这样:

  <div class="graph-container">
    <div class="bar" style="height:<?= $bar_percentage; ?>%"></div>
    <table>
      <tr>
        <td style="background-color: green;"></td>
      </tr>
      <tr>
        <td style="background-color: yellow;"></td>
      </tr>
      <tr>
        <td style="background-color: red;"></td>
      </tr>
    </table>
  </div>

然后绝对地将棒放在桌子内:

<style>
  .graph-container {
    width: 300px;
    height: 300px;
    position: relative;
  }

  .graph-container table td {
    height: 100px;
    width: 100px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .bar {
    position: absolute;
    bottom: 0;
    left: 30px;
    width: 30px;
    background-color: black;
  }
</style>

graph-container (但不是在底部) 图形容器 的父元素,甚至更低!)

此外,钢筋的高度应为钢筋高度的百分比 但是当我把这个百分比设置为100%时,它比图形容器要大得多,而且我不知道它将它的百分比与哪个元素进行比较!!!

欢迎任何帮助!非常感谢。