Question

基本上，我使用dompdf创建一个pdf。但是，dompdf正在监听常见的CSS和HTML。所以，我有一个html表。有<td>，其中包含大量图像。

是否可以操纵此<td>知道图像是否不合适，因此图像将连续低于上一张图像。

这是我的代码。

**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>

现在查看

任何帮助它如此赞赏

Answer 1

这似乎更像是一个设计问题。

将每个图像放在它自己的td和/或它自己的行上可能会解决你的问题。

如果你想要一个更具反应性的设计，我会建议完全放弃表并使用浮动div。

您可以使用javascript来确定图像的宽度等，然后相应地调整您的表格样式，但我不确定dompdf如何响应javascript。

Answer 2

table td img {
    display: inline-block;  
    float: left;
}

我还建议删除你的内联样式。

Answer 3

dompdf虽然能够很好地使用表，但确实有一些渲染怪癖。很多时候你永远不会遇到任何这些怪癖，但看起来你已经找到了一个。

看来dompdf在构建表格时无法回复内容。更具体地说，图像正在将其抛弃。可能有帮助的是将图像包装在容器中并指定容器上的宽度。这将为dompdf提供一个明确的约束，以便与图像列的宽度相关。唯一的缺点是你必须提前知道该列的宽度。

// 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>";

Answer 4

如何添加到表格样式

table {
   border-collapse: collapse;
   width: 100%;
   table-layout: fixed; //new line
}

如何在td html css / dompdf中拟合图像

4 个答案: