Border and values not matching in PDF

This happens when I use display: inline-block to wrap a table. The table itself is in the correct position (shown as pink), but the border is shifted down.

Here is the code I used. The three table has the same code, so I removed the other two. And I removed the codes used to setup dompdf

dompdf

<div style="display: inline-block;">
<table class="table-bordered" style="background-color: pink;">
<tbody>
<tr>
<th colspan="2" class="text-left p-2">
<p class="mb-0">
Some Name
</p>
<p class="mb-0">
Some Date
</p>
</th>
</tr>
<tr>
<td class="text-left p-1">
DATA
</td>
<td class="p-1">
VALUE
</td>
</tr>
<tr>
<td class="text-left p-1">
DATA
</td>
<td class="p-1">
VALUE
</td>
</tr>
</tbody>
</table>
</div>


When I use display: inline-table instead, this happens:

The table is alright, but it is not in line anymore.

And this is when I used float:left:

float:left

In line, but the border seems to moved to the leftmost side as well

I'm doing this because I can't use the grid system of Bootstrap 4 (uses flex), and I need small divs that are inline.

divs

Any idea on possible solutions for this problem or the cause? I want it to be in line and borders properly placed. All of these are showing me the expected result when viewed in the browser, but not in the PDF.

1 Answer
1

Hope this helps!

You can add three table's inside each td of another table.

td

<table style="table-layout:fixed;margin:0 auto;">
<tbody>
<tr>
<td style="vertical-align:top;">
<div style="display: inline-block;">
<table class="table-bordered" style="background-color: pink;table-layout: fixed;border-collapse: collapse;">
<tbody>
<tr>
<th colspan="2" class="text-left p-2" style="border: 1px solid #000;">
<p class="mb-0">
Some Name
</p>
<p class="mb-0">
Some Date
</p>
</th>
</tr>
<tr>
<td class="text-left p-1" style="border: 1px solid #000;">
DATA
</td>
<td class="p-1" style="border: 1px solid #000;">
VALUE
</td>
</tr>
<tr>
<td class="text-left p-1" style="border: 1px solid #000;">
DATA
</td>
<td class="p-1" style="border: 1px solid #000;">
VALUE
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td style="vertical-align:top;">
<div style="display: inline-block;">
<table class="table-bordered" style="background-color: pink;table-layout: fixed;border-collapse: collapse;">
<tbody>
<tr>
<th colspan="2" class="text-left p-2" style="border: 1px solid #000;">
<p class="mb-0">
Some Name
</p>
<p class="mb-0">
Some Date
</p>
</th>
</tr>
<tr>
<td class="text-left p-1" style="border: 1px solid #000;">
DATA
</td>
<td class="p-1" style="border: 1px solid #000;">
VALUE
</td>
</tr>
<tr>
<td class="text-left p-1" style="border: 1px solid #000;">
DATA
</td>
<td class="p-1" style="border: 1px solid #000;">
VALUE
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td style="vertical-align:top;">
<div style="display: inline-block;">
<table class="table-bordered" style="background-color: pink;table-layout: fixed;border-collapse: collapse;">
<tbody>
<tr>
<th colspan="2" class="text-left p-2" style="border: 1px solid #000;">
<p class="mb-0">
Some Name
</p>
<p class="mb-0">
Some Date
</p>
</th>
</tr>
<tr>
<td class="text-left p-1" style="border: 1px solid #000;">
DATA
</td>
<td class="p-1" style="border: 1px solid #000;">
VALUE
</td>
</tr>
<tr>
<td class="text-left p-1" style="border: 1px solid #000;">
DATA
</td>
<td class="p-1" style="border: 1px solid #000;">
VALUE
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.