Wie Bild in td html css/dmpdf

Question

anpassen Grundsätzlich erstelle ich ein PDF mit Dompdf. Aber, dommpdf hört Common CSS und HTML. Also, ich habe eine Tabelle in HTML. Es gibt eine <td>, die viel Bild enthält.

Ist es möglich zu manipulieren <td> wissen, ob das Bild nicht passt, so wird Bild kontinuierlich unter dem vorherigen Bild.

Dies ist mein Code.

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

Dies sieht jetzt

Jede Hilfe es so

geschätzt

Answer 1

Dies scheint als alles, was eher ein Design-Problem zu sein.

Platzieren jedes Bild in seiner eigenen td und/oder in seiner eigenen Zeile möglicherweise Ihr Problem beheben würde.

Wenn Sie ein reaktiveres Design wünschen, würde ich vorschlagen, Tabellen ganz aufzugeben und floating divs zu verwenden.

Sie können Javascript verwenden, um die Breite von Bildern usw. zu bestimmen, und passen Sie dann Ihren Tabellenstil entsprechend an, aber ich bin mir nicht sicher, wie dompdf auf Javascript reagiert.

Answer 2

Ich empfehle auch, Ihre Inline-Stile zu entfernen.

Answer 3

dompdf, während ziemlich mit Tabellen, hat einige Rendering Marotten. Viele Male wirst du nie auf diese Macken stoßen, aber es sieht so aus, als hättest du eins gefunden.

Es scheint, dass dompdf Probleme beim Reflow von Inhalten hat, da es die Tabelle aufbaut. Genauer gesagt, die Bilder werfen es ab. Es kann hilfreich sein, die Bilder in einen Container zu verpacken und eine Breite für den Container anzugeben. Dies würde dompdf eine definitive Einschränkung für die Arbeit mit der Breite der Bildspalte geben. Der einzige Nachteil ist, dass Sie im Voraus eine gute Breite für diese Spalte wissen müssen.

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