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

Question

I need to add background gradients to some td and th elements in page which gets converted to PDF, however I'm getting some 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 of the th seems to encroach on each subsequent td somehow. All is well if I remove the th or set its height to a whole multiple of the td height.

Anyone got any insight into what's going on here? My HTML is hard to change so I'm hoping to be able to get this working using CSS alone, or wkhtmltopdf settings.

Edit:

Some screenshots before the bounty expires:

Here's how it looks in a webkit browser:

Here's what wkhtmltopdf does to it:

And one further observation: it doesn't have to be a th to cause the problem, as changing it to a similarly targeted <td class='th'> will cause the same effect.

Answer 1

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

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

Answer 2

For me it was as simple as adding

background-repeat: no-repeat !important;

Answer 3

What you think about this?

<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>

Is better to use DIV instead of the tables. You can do same thing with small changes. And is better for you to add CSS inline to HTML if you work PDF or send on email like template.

UPDATE:

You can do this:

<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 upgrade wkhtmltopdf due to security reasons and we experienced 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;
}

Applied to any table <th> or <tr> cells, renders something like this: Gradient Bug

It turns out that this version of webkit has problems handling "repeat-x" CSS property, so, to solve this issue I have used this CSS3 Equivalent:

.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 eliminating the problem. As for background-size, the value 100% does the same as the original repeat-x, and the 23px is the height of the image that produces your gradient. in this case is the height of /RichWidgets/img/bar_gradient.png. When we added this CSS3 style the PDF rendered correctly as shown in the following image:

Gradient problem solved

Best Regards, Nuno Guedes

Answer 5

Use inline css for this page which convert to pdf.