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;