How can I get wkhtmltopdf to display th and td gradients?

Question

I need to add background gradients to some td and th elements on the page that convert to PDF, but I get very strange behavior from wkhtmltopdf, so when I do this:

table { width: 100%; border-collapse: collapse; } th { height: 60px; border: 1px solid Black; } td { height: 100px; background: -webkit-linear-gradient(top, #ccc 0%, #888 100%); border: 1px solid Black; } 

 <table> <tr> <th></th> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> 

The height th seems to encroach on each subsequent td in some way. All is well if I delete th or set its height to an integer multiple of the height td.

Has anyone understood what is going on here? My HTML is hard to change, so I hope to get this working using CSS only or the wkhtmltopdf settings.

Edit:

Some screenshots before expiration:

Here's what it looks like in the webkit browser:

Here is what wkhtmltopdf does:

And one more observation: it should not be th in order to cause a problem, since changing it to a similarly targeted <td class='th'> will lead to the same effect.

Answer 1

wkhtmltopdf still uses the old (deprecated) webkit gradient syntax. Try the following:

 -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#888)); 

Answer 2

For me it was as easy as adding

 background-repeat: no-repeat !important; 

Answer 3

What do you think about it?

 <style> .table { width: 100%; display:table; border-collapse: collapse; } .tr { height: 60px; display:table-row; border: 1px solid Black; } .td, .th{ height: 60px; border: 1px solid Black; display:table-cell; background: -webkit-linear-gradient(top, #ccc 0%, #888 100%); } </style> <div class="table"> <div class="tr"> <div class="th"></div> </div> <div class="tr"> <div class="td"></div> </div> <div class="tr"> <div class="td"></div> </div> </div> 

It is better to use DIV instead of tables. You can do the same with minor changes. And it’s better for you to add CSS built-in to HTML if you work in PDF format or send via email as a template.

UPDATE:

You can do it:

 <style> table { width: 100%; border-collapse: collapse; } th { height: 60px; } td{height: 100px;} td, th { background: -webkit-linear-gradient(top, #ccc 0%, #888 100%); border: 1px solid Black; } </style> <table> <tr> <th></th> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> 

or jQuery to replace tables with nested divs:

 <style> .table { width: 100%; display:table; border-collapse: collapse; } .table .tr{ display:table-row; } .table .th{ height: 60px; font-weight:bold; } .table .td{height: 100px;} .table .th, .table .td { border: 1px solid Black; display:table-cell; background: -webkit-linear-gradient(top, #ccc 0%, #888 100%); } </style> <table> <tr> <th>a</th> </tr> <tr> <td>b</td> </tr> <tr> <td>c</td> </tr> </table> <script> $(document).ready(function(){ $("table").each(function(a,table){ var i=a; $(table).after('<div class="table" id="table-'+i+'"></div>'); var currentTH = $(this).parent().find('th'); $(currentTH).each(function(){ var content=$(this).html(); $('#table-'+i).append(' <div class="tr"><div class="th">'+content+'</div></div>'); }); var currentTD = $(this).parent().find('td'); $(currentTD).each(function(){ var content=$(this).html(); $('#table-'+i).append(' <div class="tr"><div class="td">'+content+'</div></div>'); }); $(this).remove(); }); }); </script> 

Answer 4

We had to update wkhtmltopdf due to security concerns, and we ran into the same problem, however, after struggling with CSS, I managed to find a solution that worked for us, for example, the following CSS:

 .TableRecords_Header { color:#EAEAEA; font-weight: normal; background: #0F5D85 url(/RichWidgets/img/bar_gradient.png); white-space: nowrap; line-height: 18px; padding: 4px 6px 4px 6px; border-right: 1px solid white; font-size: 14px; } 

Applies to any <th> or <tr> table, does the following: Gradient error

It turns out that this version of webkit has problems processing the CSS repeat-x property, so I used this CSS3 equivalent to solve this problem:

 .TableRecords_Header { background-repeat: no-repeat !important; background-size: 100% 23px !important; } 

Where background-repeat: no-repeat! important; tells webkit not to use background repetition, fixing the problem. As for the background size , a value of 100% does the same as the original repeat-x, and 23px does the height of the image that produces your gradient. in this case, the height is /RichWidgets/img/bar_gradient.png . When we added this CSS3 style, the PDF looked right, as shown in the following image:

Gradient problem resolved

Best regards, Nuno Guedes

Answer 5

Use the built-in css for this page, which is converted to pdf.