I have the table shown below; what I want is to insert an image next to the table in my pdf view. I am using domPDF.
I try to use display inline-block but domPDF doesn't support display inline.
table { width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; } table th, table td { padding: 20px; background: #EEEEEE; text-align: center; border-bottom: 1px solid #FFFFFF; } table th { white-space: nowrap; font-weight: normal; } table td { text-align: right; } table td h3 { color: #ab5401; font-size: 1.2em; font-weight: normal; margin: 0 0 0.2em 0; } table .no { color: #FFFFFF; font-size: 1.6em; background: #ad9c82; } table .desc { text-align: left; } table .total .total-div { text-decoration: line-through; } table .total { background: #ad9c82; color: #FFFFFF; } table td.total { font-size: 1.2em; } table tbody tr:last-child td { border: none; } table tfoot td { padding: 10px 20px; background: #FFFFFF; border-bottom: none; font-size: 1.2em; white-space: nowrap; border-top: 1px solid #AAAAAA; } table tfoot tr:first-child td { border-top: none; } table tfoot tr:last-child td { color: #ab5401; font-size: 1.4em; border-top: 1px solid #ab5401; } table tfoot tr td:first-child { border: none; } <table border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th class="no">#</th> <th class="desc">DESCRIPTION</th> <th class="total">TOTAL</th> </tr> </thead> <tbody> <tr> <td class="no">01</td> <td class="desc"> <h3>Website Design</h3>Creating a recognizable design solution based on the company's existing visual identity</td> <td class="total">$1,200.00</td> </tr> <tr> <td class="no">02</td> <td class="desc"> <h3>Website Development</h3>Developing a Content Management System-based Website</td> <td class="total">$3,200.00</td> </tr> </tbody> <tfoot> <tr> <td colspan="2"></td> <td colspan="2">SUBTOTAL</td> <td>$5,200.00</td> </tr> <tr> <td colspan="2"></td> <td colspan="2">TAX 25%</td> <td>$1,300.00</td> </tr> <tr> <td colspan="2"></td> <td colspan="2">GRAND TOTAL</td> <td>$6,500.00</td> </tr> </tfoot> </table> While the image for placeholder is the following:
<img src="https://picsum.photos/200" alt="Image example">
I tried to add it but it is always placed under the table, not next to it as I want.