如何在TD HTML CSS/DOMPDF中适合图像 [英] How to fit image in td html css / dompdf

问题描述

基本上，我使用dompdf创建一个pdf.但是，dompdf正在侦听常见的css和html.因此，我在html中有一个表.有一个< td> ，其中包含很多图像.

Basically, I create a pdf using dompdf. But, dompdf is listening common css and html. So, I have a table in html. There is a <td> which is contains a lot of image.

是否有可能操纵此< td> 知道图像是否不合适，因此图像将在上一张图像下方连续.

Is it possible to manipulate this <td> know if image does not fit , so image will be continous below previous image.

这是我的代码.

**CSS**
table, td, th {
            border: 1px solid black;
        }

table {
       border-collapse: collapse;
       width: 100%;
        }

.table-no-border tr td th{
      border : none;
 }

 td {
    height: 50px;
    vertical-align: middle;
    text-align: center;
  }

**HTML**
<tbody>
    <?php
       $no = 1;
          foreach ($image->result() as $row) {
               $file_thumb = explode(", ", $row->FILE_THUMB);
               echo "<tr>";
                 echo "<td style='vertical-align: text-top ; text-align: left;'>$no</td>";
                 echo "<td style='vertical-align: text-top ; text-align: left;'>$row->SPEC <br> $row->CONTRACT_NO <br> $row->SIZE <br> $row->COIL_NO</td>";

                // a lot of image in td //
                 echo "<td>";
                    for ($i = 0; $i < count($file_thumb); $i++) {
                        echo "<img src= '$file_thumb[$i]' >";
                    }

                echo "</td>";

                echo "<td style='vertical-align: text-top ; text-align: left;'>$row->CHECK_LIST</td>";
                echo "</tr>";
            $no++;
          }
   ?>
 </tbody>

现在可以查看

任何对此表示赞赏的帮助

Any help it so appreciated

推荐答案

dompdf虽然具有表格的功能，但确实存在一些渲染问题.很多时候，您永远不会遇到任何这些怪癖，但看起来您已经找到了其中一个.

dompdf, while fairly capable with tables, does have some rendering quirks. Many times you'll never run into any of these quirks, but it looks like you've found one.

在构建表时，dompdf似乎在重排内容方面遇到麻烦.更具体地说，图像使它变得不那么重要了.将图像包装在容器中并在容器上指定宽度可能会有所帮助.这将给dompdf一个确定的约束，使其可以与图像列的宽度相关联.唯一的缺点是您必须事先知道该列的合适宽度.

It appears dompdf is having trouble reflowing content as it builds the table. More specifically the images are throwing it off. What might help is to wrap the images in a container and specify a width on the container. This would give dompdf a definitive constraint to work with related to the width of the image column. The only down side is that you would have to know in advance a good width for that column.

// a lot of image in td //
echo "<td><div style='width: 200px;'";
for ($i = 0; $i < count($file_thumb); $i++) {
  echo "<img src= '$file_thumb[$i]' >";
}
echo "</div></td>";

这篇关于如何在TD HTML CSS/DOMPDF中适合图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！