css – 如何让wkhtmltopdf显示th和td背景渐变?

前端之家收集整理的这篇文章主要介绍了css – 如何让wkhtmltopdf显示th和td背景渐变?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

th的高度似乎以某种方式侵占了每个后续的td.如果我移除th或将其高度设置为td高度的整数倍,则一切都很好.

任何人都能了解这里发生了什么?我的HTML很难改变所以我希望能够单独使用CSS或wkhtmltopdf设置来实现这一点.

编辑:

赏金到期前的一些截图:

以下是它在webkit浏览器中的外观:

这是wkhtmltopdf对它的作用:

还有一个进一步的观察:它不一定是导致问题的,因为将其改为类似的目标< td class ='th'>会产生同样的效果.

最佳答案
wkhtmltopdf仍然使用旧的(已弃用的)webkit渐变语法.试试这个:

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

猜你在找的CSS相关文章