How to Configure Table Column Widths and Row Heights in html-to-pdfmake

Enable the tableAutoSize option when calling htmlToPdfmake() to parse CSS widths, heights, and <colgroup> definitions into PDFMake-compatible widths and heights arrays.

The aymkdn/html-to-pdfmake library converts HTML tables into PDFMake table definitions, but dimensional control is opt-in. By default, the parser ignores sizing information and lets PDFMake auto-layout the table. To configure table column widths and row heights, you must activate the tableAutoSize flag so the parser inspects inline styles, attributes, and <colgroup> elements.

How the tableAutoSize Option Works

When tableAutoSize is set to true, the parser enters a dedicated sizing pass before generating the PDFMake definition. In index.js, the constructor stores this setting at line 45 (this.tableAutoSize). When a <table> node is encountered at line 295, the code iterates over every cell (lines 298-338) to collect raw width and height values from CSS properties or HTML attributes.

The library normalizes values such as converting * to auto and handles complex spans (colspan/rowspan). If a <colgroup> is present, the widths defined on <col> elements override individual cell widths (lines 443-556). Finally, the computed arrays are assigned to ret.table.widths and ret.table.heights at lines 696-699.

Setting Column Widths

CSS Width Properties on Table Cells

The simplest method is adding inline styles to <td> or <th> elements. The parser extracts these values during the auto-size pass (lines 298-338).

<table>
  <tr>
    <td style="width: 150px">Fixed width</td>
    <td style="width: 50%">Percentage width</td>
  </tr>
</table>

const pdfContent = htmlToPdfmake(html, { window, tableAutoSize: true });
// pdfContent[0].table.widths → [150, "50%"]

Using Colgroup Elements

For consistent column sizing across many rows, define a <colgroup> at the top of the table. The parser prioritizes these widths over individual cell styles (lines 443-556).

<table>
  <colgroup>
    <col width="30%">
    <col width="70%">
  </colgroup>
  <tr>
    <td>Narrow column</td>
    <td>Wide column</td>
  </tr>
</table>

When the table itself has a percentage width (e.g., width="100%"), the library uses a proportional rule-of-three calculation to convert pixel values into percentages (lines 664-677). If the table is declared as full width, any remaining auto entries become * so PDFMake distributes remaining space evenly (line 695).

Data Attributes for Manual Control

Bypass CSS parsing entirely by embedding a JSON fragment in the data-pdfmake attribute. The library merges this object into the final table definition after the auto-size step (lines 401-414).

<table data-pdfmake='{"widths":[100, "*", "auto"]}'>
  <tr>
    <td>Fixed</td>
    <td>Star</td>
    <td>Auto</td>
  </tr>
</table>

const def = htmlToPdfmake(html, { window, tableAutoSize: false });
// def[0].table.widths → [100, "*", "auto"]

Configuring Row Heights

Row height detection follows the same pattern as column widths. During the table processing loop, the parser stores the greatest height encountered for each row in tableHeights (lines 781-788). These values are then assigned to ret.table.heights (lines 696-699).

<table>
  <tr style="height: 50px">
    <td>Short row</td>
  </tr>
  <tr style="height: 100px">
    <td>Tall row</td>
  </tr>
</table>

const result = htmlToPdfmake(html, { window, tableAutoSize: true });
// result[0].table.heights → [37.5, 75]  // converted to PDF points (1px ≈ 0.75pt)

Complete Code Examples

Example 1: Mixed Sizing with tableAutoSize

const html = `
<table style="width:100%">
  <tr style="height:100px">
    <td style="width:350px"></td>
    <td></td>
  </tr>
  <tr>
    <td style="width:100px"></td>
    <td style="height:200px"></td>
  </tr>
</table>`;

const result = htmlToPdfmake(html, { window, tableAutoSize: true });
/* result[0].table contains:
   widths  → [264, "auto"]   // 350px and 100px converted to points, max per column kept
   heights → [75, 151]       // 100px and 200px converted to points
*/

The unit test in test/unit.js validates these exact conversions at lines 21-35.

Example 2: Post-Conversion Manual Adjustments

let def = htmlToPdfmake(html, { window });
def[0].table.widths = [200, '*'];      // first column fixed, second fills remaining space
def[0].table.heights = [50, 80];       // explicit row heights in PDF points

Key Implementation Files

File	Purpose
index.js	Core parser containing the TABLE case (line 295), auto-size logic (lines 298-338), colgroup handling (lines 443-556), and final array assignment (lines 696-699).
test/unit.js	Unit tests demonstrating expected widths and heights output when tableAutoSize is enabled (lines 21-35).
README.md	Documents the tableAutoSize configuration option and basic usage examples.
example.js	Runnable demonstration showing end-to-end HTML to PDFMake conversion.

Summary

• Enable sizing support by setting tableAutoSize: true in the htmlToPdfmake() options object.
• Set column widths using inline CSS (style="width:..."), HTML width attributes, or <colgroup> definitions.
• Set row heights using inline CSS (style="height:...") or HTML height attributes on table rows.
• Override automatically by adding a data-pdfmake JSON attribute to the <table> element for direct PDFMake control.
• Adjust manually after conversion by editing the table.widths and table.heights arrays on the returned definition object.

Frequently Asked Questions

What happens if I don't enable tableAutoSize?

If tableAutoSize is omitted or set to false, the parser ignores all CSS width, height, and colgroup information. PDFMake will use its default auto-layout algorithm to size columns and rows based on content, which may not match your HTML visual layout.

Can I mix percentage and pixel values for column widths?

Yes. The parser normalizes values during the auto-size pass (lines 664-677). When the table has a percentage-based total width, pixel values are converted to proportional percentages using a rule-of-three calculation. You can also use the data-pdfmake attribute to explicitly define mixed arrays like [100, "30%", "*", "auto"].

Why are my row heights different in the PDF than in my CSS?

PDFMake uses PDF points (1/72 inch) as its unit, while CSS typically uses pixels. The conversion factor is approximately 0.75 (1px ≈ 0.75pt). The parser applies this conversion during the auto-size pass (lines 781-788), so a CSS height of 100px becomes approximately 75 in the PDFMake definition.

How do I make a table fill the full page width?

Set the table's CSS width to 100% (e.g., <table style="width:100%">). When tableAutoSize is enabled and the parser detects a full-width table, it converts any remaining auto column entries to * (line 695), instructing PDFMake to distribute remaining space evenly across those columns.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}