如何在jsPDF autoTable中增加表头与首行间距？rowStyles失效问题

Hey there! Let's work through the two issues you're hitting with jsPDF autoTable:

1. Fixing the rowStyles rowHeight not taking effect for row 0 #

First, let's clarify: in jsPDF autoTable, rowStyles targets body rows (the data rows below the header), so index 0 should correctly point to your first data row (["% HSA Used", "40%", ...]).

If the row height isn't sticking, a reliable fix is to explicitly set the height with minRowHeight to enforce it, even if the row content is short:

rowStyles: {
  0: { rowHeight: 50, minRowHeight: 50 }
}

If you actually meant to adjust the header row's height instead of the first data row, swap to headStyles instead:

headStyles: {
  rowHeight: 50
}

2. Adding spacing between the header and first data row #

jsPDF autoTable doesn't have a dedicated setting for this, but there are two clean ways to add the gap:

Option 1: Add padding to the top of the first data row

This pushes the first row's content down from the header by adjusting its internal spacing:

rowStyles: {
  0: { rowHeight: 50, paddingTop: 10 } // 10 is your desired spacing in points
}

Option 2: Add margin below the header

This adds space directly under the header without modifying the data row itself:

headStyles: {
  marginBottom: 10
}

Updated full configuration #

Here's your autoTable setup with both fixes applied (using the paddingTop method for simplicity):

doc.autoTable(columns, rows, {
  styles: {
    fontSize: 10,
    font: "helvetica",
    lineColor: 255,
    lineWidth: 1,
    fontStyle: 'normal',
    overflow: 'ellipsize',
    fillColor: false,
    textColor: 20,
    halign: 'left',
    valign: 'middle',
    columnWidth: 'auto',
  },
  columnStyles: {
    1: {columnWidth: 28},
    2: {columnWidth: 20},
    3: {columnWidth: 20},
    4: {columnWidth: 20},
    5: {columnWidth: 35},
    columnWidth: 'wrap'
  },
  rowStyles: {
    0: { rowHeight: 50, paddingTop: 10 } // Fixes both row height and header spacing
  },
  margin: {top: 220},
  addPageContent: function(data) { }
});

A quick check: If you still run into issues, verify your jsPDF autoTable version—some older releases have minor differences in how style properties are prioritized.

内容的提问来源于stack exchange，提问作者Mariya