i using jspdf autotable plugin table pdf.
my sources:
#javascriptincludetag("jspdf.min.js")# #javascriptincludetag("jspdf.plugin.autotable.js")#
my sources from:
https://github.com/mrrio/jspdf
https://github.com/simonbengtsson/jspdf-autotable
my script :
$(function() { var doc = new jspdf('p', 'pt', 'a4'); var $tables2 = $(".pdftable2"); var startingy = 0; $tables2.each(function( index ) { var $this = $(this), tableid = $this.attr('id'); var res = doc.autotablehtmltojson(document.getelementbyid(tableid)); var offset = 2; startingy = doc.autotableendposy() + offset; doc.autotable(res.columns, res.data, { starty: startingy, pagebreak: 'avoid', theme: 'grid', styles: { overflow: 'linebreak', fontsize: 12, valign: 'middle' }, columnstyles: { 0: {valign: "top"}, 1: { columnwidth: 20, fontstyle: 'bold', halign: 'center', }, 2: { columnwidth: 20, fontstyle: 'bold', halign: 'center', }, 3: { columnwidth: 20, fontstyle: 'bold', halign: 'center', }, } }); }); doc.save('pdf doc'); });
my markup:
<table class="pdftable2" id="j_info" border="1"> <tr> <th>group name</th> <th>yes</th> <th>na</th> <th>no</th> </tr> <tr> <td colspan="4">sub group name</td> </tr> <tr> <td> phasellus sagittis tristique augue </td> <td></td> <td>x</td> <td></td> </tr> </table>
my header group name , second row after sub group name. want target second row sub group , give unique style. how target entire row. below table looks like.
important note: css style have no effect on way pdf looks. interested in how pdf looks not how actual page looks in browser. matters, entire table can hidden, jspdf autotable still render in pdf.
try :
$(document).ready(function() { $('tr').find('td').eq(0).addclass('highlight'); });
example : https://jsfiddle.net/bneen5rc/