# How to Configure Table Column Widths and Row Heights in html-to-pdfmake > Learn to configure table column widths and row heights in html-to-pdfmake using the tableAutoSize option. Easily parse CSS widths and colgroup definitions for precise table layout in your PDFs. - Repository: [Aymeric/html-to-pdfmake](https://github.com/aymkdn/html-to-pdfmake) - Tags: how-to-guide - Published: 2026-02-26 --- **Enable the `tableAutoSize` option when calling `htmlToPdfmake()` to parse CSS widths, heights, and `` 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 `` 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`](https://github.com/aymkdn/html-to-pdfmake/blob/main/index.js), the constructor stores this setting at line 45 (`this.tableAutoSize`). When a `` 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 `` is present, the widths defined on `` 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 `` at the top of the table. The parser prioritizes these widths over individual cell styles (lines 443-556). ```html
` or `` elements. The parser extracts these values during the auto-size pass (lines 298-338). ```html
Fixed width Percentage width
``` ```javascript 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 `
Narrow column Wide column
``` 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). ```html
Fixed Star Auto
``` ```javascript 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). ```html
Short row
Tall row
``` ```javascript 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 ```javascript const html = `
`; 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`](https://github.com/aymkdn/html-to-pdfmake/blob/main/test/unit.js) validates these exact conversions at lines 21-35. ### Example 2: Post-Conversion Manual Adjustments ```javascript 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`](https://github.com/aymkdn/html-to-pdfmake/blob/main/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`](https://github.com/aymkdn/html-to-pdfmake/blob/main/test/unit.js) | Unit tests demonstrating expected `widths` and `heights` output when `tableAutoSize` is enabled (lines 21-35). | | [`README.md`](https://github.com/aymkdn/html-to-pdfmake/blob/main/README.md) | Documents the `tableAutoSize` configuration option and basic usage examples. | | [`example.js`](https://github.com/aymkdn/html-to-pdfmake/blob/main/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 `` 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 `` 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., `
`). 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.