Css 如何让wkhtmltopdf显示th和td背景渐变？

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

表格{
宽度：100%；
边界塌陷：塌陷；
}
th{
高度：60px；
边框：1px纯黑；
}
运输署{
高度：100px；
背景：-webkit线性梯度（顶部，#ccc 0%，#888 100%）；
边框：1px纯黑；
}

使用内联css将此页面转换为pdf。

您对此有何看法

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

.桌子{
宽度：100%；
显示：表格；
边界塌陷：塌陷；
}
.tr{
高度：60px；
显示：表格行；
边框：1px纯黑；
}
.td，.th{
高度：60px；
边框：1px纯黑；
显示：表格单元格；
背景：-webkit线性梯度（顶部，#ccc 0%，#888 100%）；
}

最好使用DIV而不是表。你也可以做同样的事情，只需稍加修改。 如果您使用PDF或类似电子邮件的模板发送，则最好将CSS内联添加到HTML中

更新：

您可以这样做：

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

桌子{
宽度：100%；
边界塌陷：塌陷；
}
th{
高度：60px；
}
td{高度：100px；}
td，th{
背景：-webkit线性梯度（顶部，#ccc 0%，#888 100%）；
边框：1px纯黑；
}

或jQuery将表替换为嵌套的div：

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

.桌子{
宽度：100%；
显示：表格；
边界塌陷：塌陷；
}
.table.tr{
显示：表格行；
}
.表.th{
高度：60px；
字体大小：粗体；
}
.table.td{高度：100px；}
.表.th，
.table.td{
边框：1px纯黑；
显示：表格单元格；
背景：-webkit线性梯度（顶部，#ccc 0%，#888 100%）；
}
A.
B
C
$（文档）.ready（函数（）{
$（“表”）。每个（函数（a，表）{
var i=a；
$（表）。在（''）之后；
var currentTH=$（this.parent（）.find（'th'）；
$（当前值）。每个（函数（）{
var content=$（this.html（）；
$（“#表-”+i）.append（“”+content+“”）；
});
var currentTD=$（this.parent（）.find（'td'）；
$（currentTD）.每个（函数（）{
var content=$（this.html（）；
$（“#表-”+i）.append（“”+content+“”）；
});
$（this.remove（）；
});
});

wkhtmltopdf仍然使用旧的（不推荐使用的）webkit渐变语法。试试这个：

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

---

出于安全原因，我们不得不升级wkhtmltopdf，我们也遇到了同样的问题，但是在与CSS进行斗争后，我设法找到了一个适合我们的解决方案，例如，以下CSS：

.TableRecords\u标题{
颜色：#EAEAEA；
字体大小：正常；
背景：#0F5D85 url（/RichWidgets/img/bar_gradient.png）；
空白：nowrap；
线高：18px；
填充：4px6px 4px6px；
右边框：1px纯白；
字体大小：14px；
}

对我来说，这就像添加

background-repeat: no-repeat !important;

---

不幸的是，我认为这不会奏效。但是，您仍然可以通过使用图像作为背景来实现几乎只有CSS的解决方案。这对你有用吗？一个带有图像的CSS解决方案对我来说已经足够好了，但是这种方法也可以观察到类似的glitchy渲染。以下两种方法对我来说都是一样的：

background:-webkit渐变（线性，左上，右下，颜色停止（0%，rgba（25，25，175，1）），颜色停止（33%，rgba（25，25，175，1）），颜色停止（100%，rgba（93，168，226，1））；

和

背景：-webkit渐变（线性，左上，右下，从（rgba（25，25，175，1）），到（rgba（93，168，226，1））；

感谢您的建议，但转换了我所有的表（它们实际上不是空的单列表）在我的例子中，嵌套div并不是一个切实可行的解决方案。好吧，我更新我的答案，看看这个解决方案。上一个jQuery解决方案用nasted div替换你的表。你可以将这个解决方案更新为jQuery，保存一些属性并放入新的div元素。恐怕这个语法不会改变结果。我已经看到了其他wkHTMLTOF的建议我认为它可能已经过时了，因为它在我尝试过的任何案例（页眉/页脚）中都不起作用。我一直在使用12.1或更新版本。