如何获取wkhtmltopdf以显示th和td背景渐变?

问题描述

我需要在页面中的某些td和th元素上添加背景渐变，这些元素会转换为PDF，但是我从wkhtmltopdf中得到了一些非常奇怪的行为，所以当我这样做时:

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>

th的高度似乎以某种方式侵犯了随后的每个td.如果删除th或将其高度设置为td高度的整数倍，一切都很好.

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.

有人对这里发生的事情有任何了解吗?我的HTML很难更改，因此我希望能够单独使用CSS或wkhtmltopdf设置来使它正常工作.

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.

赏金到期前的一些屏幕截图:

Some screenshots before the bounty expires:

在Webkit浏览器中的外观如下:

Here's how it looks in a webkit browser:

这是wkhtmltopdf对它的作用:

Here's what wkhtmltopdf does to it:

还有一个进一步的观察:引起问题的不必一定是th，因为将其更改为类似目标的<td class='th'>会产生相同的效果.

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.

推荐答案

wkhtmltopdf仍使用旧的(不建议使用的)Webkit渐变语法.试试这个:

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

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

这篇关于如何获取wkhtmltopdf以显示th和td背景渐变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！