dompdf bootstrap table first value is shown in the second column

Question

I am using Dompdf to export a table report to PDF, the table looks ок in HTML as follows (an example is here):

  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

The problem is that, when exported to PDF, the very first value of the table is offset to the second column... like this:

<tbody>
      <tr>
        <td></td> {#NOTHING HERE#}
        <td>John</td>
        <td>Doe</td> 
      </tr>
      <tr>
        <td>john@example.com</td>{#Now everything is offset#}
        <td>Mary</td>
        <td>Moe</td>
      </tr>
      <tr>
        <td>mary@example.com</td>
        <td>July</td>
        <td>Dooley</td>
      </tr>
     <td>july@example.com</td>{#And this goes outside the table#}
    </tbody>

The dompdf version is 0.7.x@beta.

I even try to convert the table with this site to divs and it ouputs yet another error!

Why is this happening??? How can I fix it?

Answer 1

This is a bug in dompdf versions prior to 0.7.0, see issue #1103.

Answer 2

this remove some empty spaces, try:

thead:before, thead:after { display: none; }
tbody:before, tbody:after { display: none; }