javascriptjspdfjspdf-autotable
Display border only inside of table autoTable-jsPDF
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>Solution
You could draw a white border around the table using this trick :
doc.autoTable({
// ...
tableLineColor: [255, 255, 255],
tableLineWidth: 1,
})
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",
tableLineColor: [255, 255, 255],
tableLineWidth: 1,
});
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>- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices