I am trying to create a table that looks like this:
I have achieved something similar but I need to remove border outside of table. Right now I use lineWidth: 0.2, lineColor: [73, 138, 159] to create the borders but is not that I need. I have checked all the documentation of autoTable-jsPDF but can't find anything similar.
Can someone help me with that ? Thanks.
function doPDF() { var doc = new jsPDF("p", "mm", "a4", true); var totalPaginas = "{total_pages_count_string}"; var pagActual = 0; doc.autoTable({ startY: 40, head: [ [ { content: "", colSpan: 5, styles: { halign: "center", fillColor: [43, 130, 158] } } ] ], body: [ [ { content: "TÍTULO", colSpan: 1, styles: { valign: "middle", fillColor: [244, 247, 249], fontStyle: "bold" } }, { content: "TÍTULO", colSpan: 4, styles: { valign: "middle" } } ], [ { content: "ESTRATÉGIA DIDÁCTICA", colSpan: 1, styles: { valign: "middle", fillColor: [244, 247, 249], fontStyle: "bold" } }, { content: "ESTRATÉGIA DIDÁCTICA", colSpan: 4, styles: { valign: "middle" } } ], [ { content: "OBJETIVOS", colSpan: 1, styles: { valign: "middle", fillColor: [244, 247, 249], fontStyle: "bold" } }, { content: "OBJETIVOS", colSpan: 4, styles: { valign: "middle" } } ], [ { content: "ESPACIO", styles: { valign: "middle", halign: "center", fillColor: [244, 247, 249], fontStyle: "bold" } }, { content: "TIEMPO", styles: { valign: "middle", halign: "center", fillColor: [244, 247, 249], fontStyle: "bold" } }, { content: "DINÁMICA", styles: { valign: "middle", halign: "center", fillColor: [244, 247, 249], fontStyle: "bold" } }, { content: "SITUACIÓN DE JUEGO", styles: { valign: "middle", halign: "center", fillColor: [244, 247, 249], fontStyle: "bold" } }, { content: "COORDINACIÓN", styles: { valign: "middle", halign: "center", fillColor: [244, 247, 249], fontStyle: "bold" } } ], [ { content: "text", styles: { valign: "middle", halign: "center" } }, { content: "text", styles: { valign: "middle", halign: "center" } }, { content: "text", styles: { valign: "middle", halign: "center" } }, { content: "text", styles: { valign: "middle", halign: "center" } }, { content: "text", styles: { valign: "middle", halign: "center" } } ], [{ content: "", colSpan: 5 }] ], columnStyles: { 0: { cellWidth: 40 } }, bodyStyles: { lineWidth: 0.2, lineColor: [73, 138, 159] }, theme: "plain" }); var primera_tabla = doc.lastAutoTable.finalY; doc.autoTable({ head: [ [ { content: "ACCIÓN TÉCNICA / COORDINATIVA", styles: { halign: "center", fillColor: [244, 247, 249] } }, { content: "INTENCIÓN TÁCTICA / PRINCIPIO COLECTIVO", styles: { halign: "center", fillColor: [244, 247, 249] } } ] ], styles: { lineColor: [73, 138, 159], lineWidth: 0.2 }, theme: "plain", startY: primera_tabla }); if (typeof doc.putTotalPages === "function") { doc.putTotalPages(totalPaginas); } doc.save("pdf.pdf"); }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.4.3/jspdf.plugin.autotable.min.js"></script> <button onclick="doPDF()">Do</button>
