1

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.

1 Answer 1

1

Try Adding good old floats.

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; }
<div style="width: 65%;float:left;"> <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> </div> <div style="width: 30%;float:left;"> <img src="https://picsum.photos/200" alt="Image example" style="width: 100%;"> </div>

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.