Make tidier table and styling problem on jspdf - html

Question

I have some div in my html page i want to make it as pdf. It's the page with multiple table, and each header / table start in the new page.
The one i'm using is jspdf, and i already achieve my goal of starting the new page based of div class. The code i try is this one :
https://plnkr.co/edit/DmNuINbijP1tu4cW
$('#printbutton').on("click", function () {
var pdf = new jsPDF('landscape');
// var pdf = new jsPDF('p','pt','a4');
var pdfName = 'test.pdf';
var imagesToResize = document.getElementsByTagName("img");
for(i=0;i<imagesToResize.length;i++){
imagesToResize[i].style.width = "100px";
imagesToResize[i].style.height = "100px";
}
var options = { pagesplit: true};
var $divs = $('.myDivClass')
//jQuery object of all the myDivClass divs
var numRecursionsNeeded = $divs.length -1; //the number of times we need to call addHtml (once per div)
var currentRecursion=0;
//Found a trick for using addHtml more than once per pdf. Call addHtml in the callback function of addHtml recursively.
function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
//Once we have done all the divs save the pdf
if(currentRecursion==totalRecursions){
pdf.save(pdfName);
}else{
currentRecursion++;
pdf.addPage();
//$('.myDivClass')[currentRecursion] selects one of the divs out of the jquery collection as a html element
//addHtml requires an html element. Not a string like fromHtml.
pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
console.log(currentRecursion);
recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
});
}
}
pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
recursiveAddHtmlAndSave(currentRecursion, numRecursionsNeeded);
});
});
The problem is, the table is kinda messy, with teh width not fully the same as the paper and somehow it's making two row showing on one page (and there's hollow row at the start of the page)
Is there anything wrong in the code? my goal is for make the table readable and at least > 10 row showed at the same page.
Thank u in advance

Answer 1

The tableWidth: 'auto' should work perfectly. Anyways,
I tried the following style and properties to my table and it works fine.
pdf.autoTable(res2.columns, res2.data, {
startY: false,
theme: 'grid',
tableWidth: 'auto',
columnWidth: 'wrap',
showHeader: 'everyPage',
tableLineColor: 200,
tableLineWidth: 0,
columnStyles: {
0: {
columnWidth: 50
},
1: {
columnWidth: 50
},
2: {
columnWidth: 50
},
3: {
columnWidth: 50
},
4: {
columnWidth: 50
},
5: {
columnWidth: 'auto'
},
6: {
columnWidth: 50
},
7: {
columnWidth: 50
},
8: {
columnWidth: 'auto'
}
},
headerStyles: {
theme: 'grid'
},
styles: {
overflow: 'linebreak',
columnWidth: 'wrap',
font: 'arial',
fontSize: 10,
cellPadding: 8,
overflowColumns: 'linebreak'
},
});