I have a bunch of small tables that are formatted as inline-block elements. In the browser they display side by side as intended, but when using mPDF to output them they break after each table. No matter how I try to format them, they always break after the table. Is there a trick with mPDF to get elements to stack side-by-side?

I am pulling the exact HTML from the page and sending it via AJAX

Below is an example of the browser and pdf view.

My mPDF generator page looks like this:

<?php
include("mpdf60/mpdf.php");

$html = $_POST['html'];

$mpdf=new mPDF('utf-8', 'A4');
$mpdf->SetDisplayMode('fullpage');

// LOAD a stylesheet
$stylesheet = file_get_contents('../../_css/main.css');
$mpdf->WriteHTML($stylesheet,1);    // The parameter 1 tells that this is css/style only and no body/html/text

$mpdf->WriteHTML($html);
$mpdf->Output('myPDF.pdf','D');

exit;
?>

I have a bunch of small tables that are formatted as inline-block elements. In the browser they display side by side as intended, but when using mPDF to output them they break after each table. No matter how I try to format them, they always break after the table. Is there a trick with mPDF to get elements to stack side-by-side?

I am pulling the exact HTML from the page and sending it via AJAX

Below is an example of the browser and pdf view.

My mPDF generator page looks like this:

<?php
include("mpdf60/mpdf.php");

$html = $_POST['html'];

$mpdf=new mPDF('utf-8', 'A4');
$mpdf->SetDisplayMode('fullpage');

// LOAD a stylesheet
$stylesheet = file_get_contents('../../_css/main.css');
$mpdf->WriteHTML($stylesheet,1);    // The parameter 1 tells that this is css/style only and no body/html/text

$mpdf->WriteHTML($html);
$mpdf->Output('myPDF.pdf','D');

exit;
?>

• javascript
• php
• css
• mpdf

• Can we see the main.css? Looks like the width of both tables are too big to align them next to eachother. Keep in mind that the width of a mPDF page is around 800 pixels i believe. – Joey Commented May 31, 2015 at 14:47
• That was my first thought so I tried putting the tables at 100px and it did not make a difference in their behavior. – Kirk Logan Commented May 31, 2015 at 14:48
• Weird! But we can't see much without the CSS file. Also, which version of mPDF do you use? – Joey Commented May 31, 2015 at 14:49
• I dont believe the CSS is going to help. I stripped out the CSS file from above code and ran it with just default html table styles (with the exception of inline styling the tables as inline-block elements) and it is displaying the same. I am on mPDF version 6.0. – Kirk Logan Commented May 31, 2015 at 14:54

2 Answers 2

I try a lot of thinks too, but finally i found a solution, just use:

float: left;

Thats work for me.

I've spent a couple of hours figuring out how to make inline <div> or <p> elements with mPDF. I found some limitations, which contains the inline-block too. The display: inline or display: inline-block is ignored. You have to put everything in <span> elements if you want to see them one beside the other.