编辑：

Question

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

＆＃13;

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

＆＃13;

<table>
  <tr>
    <th></th>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

＆＃13;

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

任何人都能深入了解这里发生了什么？我的HTML很难改变，因此我希望能够单独使用CSS或wkhtmltopdf设置来实现这一点。

编辑：

赏金到期前的一些截图：

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

enter image description here

这是wkhtmltopdf对它所做的事情：

enter image description here

还有一个观察结果：它不一定要引起问题，因为将其更改为类似的目标<td class='th'>会产生同样的效果。

Answer 1

wkhtmltopdf仍然使用旧的（已弃用的）webkit渐变语法。试试这个：

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

Answer 2

对我而言，就像添加

一样简单

background-repeat: no-repeat !important;

Answer 3

您对此有何看法？

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

最好使用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>

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

Answer 4

由于安全原因，我们不得不升级wkhtmltopdf并且我们遇到了同样的问题，但是在努力使用CSS之后我设法找到了适用于我们的解决方案，例如，以下CSS：

＆＃13;

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

＆＃13;

应用于任何表<th>或<tr>单元格，呈现如下内容： Gradient Bug

事实证明，这个版本的webkit处理问题＆＃34; repeat-x＆＃34; CSS属性，所以，为了解决这个问题，我使用了这个CSS3等价：

＆＃13;

.TableRecords_Header {
    background-repeat: no-repeat !important;
    background-size: 100% 23px !important;
}

＆＃13;

background-repeat：no-repeat！important; 告诉webkit不要使用后台重复来消除问题。对于背景大小，值 100％与原始repeat-x相同， 23px 是图像的高度产生你的渐变。在这种情况下是 /RichWidgets/img/bar_gradient.png 的高度。当我们添加这个CSS3样式时，PDF正确呈现，如下图所示：

Gradient problem solved

最诚挚的问候， Nuno Guedes

Answer 5

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

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

编辑：

5 个答案: