W jaki sposób można uzyskać wkhtmltopdf wyświetlanie gradientów tła th i td?

Question

muszę dodawać gradienty tła niektórych td i th elementów strony, która zostanie przekonwertowany do formatu PDF, jednak Dostaję jakieś bardzo dziwne zachowanie z wkhtmltopdf, więc kiedy to zrobić:

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>

Wysokość th wydaje się jakoś naruszać na każdym kolejnym td. Wszystko jest w porządku, jeśli usuwam th lub ustawię jego wysokość na całą wielokrotność wysokości td.

Ktoś ma jakiś wgląd w to, co się tutaj dzieje? Mój HTML jest trudny do zmiany, więc mam nadzieję, że uda mi się to zrobić przy użyciu samego CSS lub ustawień wkhtmltopdf.

Edit:

zrzuty ekranu przed upływem Bounty:

Oto jak to wygląda w przeglądarce Webkit:

Oto co wkhtmltopdf robi do niego:

I jeszcze jedna uwaga: nie musi to być th, aby spowodować problem, ponieważ zmiana go na podobnie ukierunkowane <td class='th'> spowoduje ten sam efekt.

Answer 1

Użyj wbudowanego css dla tej strony, która konwertuje do formatu pdf.

Answer 2

Co o tym sądzisz?

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

Lepiej używać DIV zamiast tabel. Możesz zrobić to samo z małymi zmianami. I lepiej jest dodać CSS do HTML, jeśli pracujesz w formacie PDF lub wysyłasz pocztą e-mail, na przykład szablon.

UPDATE:

Można to zrobić:

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

lub jQuery zastąpić tabele z zagnieżdżonych 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 3

wkhtmltopdf nadal używa starej (przestarzałe) WebKit gradientu składnia.Spróbuj tego:

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

Answer 4

Musieliśmy uaktualnić wkhtmltopdf ze względów bezpieczeństwa i doświadczyliśmy tego samego problemu, jednak po zmaga się z CSS udało mi się znaleźć rozwiązanie, które pracowały dla nas, na przykład, następujące CSS:

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

stosowane do każdego stołu <th> lub <tr> komórki, czyni coś takiego: Gradient Bug

Okazuje się, że ta wersja WebKit ma problemy z obsługą "repeat-x" właściwości CSS, tak, aby rozwiązać ten problem Użyłem tej CSS3 równoważne:

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

Gdzie background-repeat: no-repeat! Important; important; mówi webkitowi, aby nie używał powtarzania tła, eliminując problem. Jako tło dla wielkości, wartość 100% robi to samo jak oryginalny repeat-x, a 23px jest wysokość obrazu, który produkuje swoje gradient. w tym przypadku jest to wysokość /RichWidgets/img/bar_gradient.png. Gdy dodaliśmy ten styl CSS3 PDF renderowane poprawnie jak pokazano na poniższym obrazie:

Gradient problem solved

poważaniem, Nuno Guedes

Answer 5

Dla mnie było to tak proste, jak dodanie

background-repeat: no-repeat !important;