CSS !important doesn't work with mpdf

Question

I use mPDF to convert html file to pdf file, almost fine but !important property does not work. The code is below:

CSS:

td .style1 {border-left:2px #000000 solid !important;}
td .style2 {border-left:none;}

HTML:

<table>
    <tr>
        <td class="style1 style2">Something here</td>
    </tr>
</table>

The result is border-left of td tag disappear. I think the reason is style2 bellow style1 and mPDF not know !important property. How can I fix this problem?

Note: html and css code is automatically generated, so I cannot delete style2 because css class name can be changed every time it is generated.

Note 2: The border disappear in pdf file, which generated by mPDF. The border is fine with html in browser.

Answer 1

You cannot have two rules of the same type requesting two different things. Therefore the only logical thing to do next if you cannot remove style 2 is to create an inline style like this when it is generated:

<table>
   <tr>
      <td class="style1 style2" style="border-left:2px #00000 solid !important;">Something here</td>
   </tr>
</table>

This will effectively override the style-sheet entirely and use what you told it to use here.

Answer 2

There is problem in your code only, Color code missing one ZERO (0) in style1, Rest is fine, so than style1 will get into act.

Change

td .style1 {border-left:2px #00000 solid !important;}

to

td .style1 {border-left:2px #000000 solid !important;}

Thanks

Answer 3

Your css would be like this

td .style1 {border-left:2px #000000 solid !important;}
td .style2 {border-left:none;}

or

 td .style1 {border-left:2px #000 solid !important;}
    td .style2 {border-left:none;}

Color code should of six digit or 3 digit.. Please read some article about color code

Answer 4

Try adding a more specific style for this combination:

td.style1, td.style1.style2  {border-left:2px #000000 solid;}

Answer 5

mPDF have some Problems with multiple class usage, like class="style1 style2". If possible reduce it to one. For my projects I often use an inline css to fix this:

<style>
...
</style>

Inject it with your fixes in the html header before you generate the pdf. The scond problem is that mPDF have problems with a list of tag/style definitions:

td.style1, td.style1.style2 ...

don't us this.

The other way is to replace multiple classes. If you can't change your html code.

$html = str_replace('class="style1 style2"', 'class="style1"', $html);

or to a different:

$html = str_replace('class="style1 style2"', 'class="style3"', $html);