Converting HTML tables to PDF is one of the most challenging aspects of PDF generation. Wide tables overflow page margins, long tables break awkwardly across pages, and complex table layouts often render incorrectly. This comprehensive guide covers everything you need to know about creating professional, print-ready table PDFs.
Whether you're generating financial reports, data exports, invoices with line items, or analytical dashboards, mastering table-to-PDF conversion is essential. According to industry surveys, over 65% of PDF generation issues involve table formatting problems. We'll show you proven strategies for handling landscape orientation, page breaks, responsive designs, and advanced styling.
This guide includes interactive examples using CustomJS's HTML to PDF API, which offers 600 free conversions per month and seamless integration with Make.com and n8n for automated report generation.
page-break-inside: avoid on table rows.Before diving into solutions, let's understand the main challenges developers face when converting HTML tables to PDF:
Tables with many columns often exceed standard page width (8.5" or A4). Content gets cut off or compressed to the point of being unreadable. This is especially problematic for financial reports, data exports, and comparison tables.
Multi-page tables can break in awkward places, splitting rows across pages or losing header context. Without proper page break control, table data becomes difficult to read and interpret.
Variable content lengths cause cells to resize unpredictably. Long text in one cell can distort the entire table layout, making it look unprofessional in the final PDF.
When tables span multiple pages, readers lose context without repeated headers. CSS print properties can solve this, but many PDF generators don't support them properly.
Let's start with a simple table conversion using the CustomJS API. This example shows a basic data table with proper styling for PDF output.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
th { background-color: #4f46e5; color: white; padding: 12px; text-align: left; font-weight: 600; }
td { padding: 10px; border-bottom: 1px solid #e5e7eb; }
tr:nth-child(even) { background-color: #f9fafb; }
</style>
</head>
<body>
<h1>Sales Report Q1 2026</h1>
<table>
<thead>
<tr><th>Product</th><th>Units Sold</th><th>Revenue</th><th>Growth</th></tr>
</thead>
<tbody>
<tr><td>Product A</td><td>1,250</td><td>$45,000</td><td>+12%</td></tr>
<tr><td>Product B</td><td>890</td><td>$32,500</td><td>+8%</td></tr>
<tr><td>Product C</td><td>2,100</td><td>$78,000</td><td>+25%</td></tr>
</tbody>
</table>
</body>
</html>const axios = require('axios');
const fs = require('fs');
async function convertTableToPDF(html) {
const response = await axios.post(
'https://e.customjs.io/html2pdf',
{ input: { html } },
{
headers: { 'x-api-key': 'YOUR_API_KEY', 'Content-Type': 'application/json' },
responseType: 'arraybuffer'
}
);
fs.writeFileSync('sales-report.pdf', response.data);
}
const html = fs.readFileSync('table.html', 'utf8');
convertTableToPDF(html);Try modifying the table content in the interactive widget above to see how different data renders in PDF format.
One of the most effective strategies for handling wide tables is switching to landscape orientation. This gives you significantly more horizontal space for columns.
@page {
size: A4 landscape;
margin: 15mm;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 10pt;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #4f46e5;
color: white;
font-weight: 600;
}Long tables that span multiple pages require careful page break management to maintain readability and context.
The most important rule: never split a table row across pages. Use CSS to keep rows together:
tr {
page-break-inside: avoid;
break-inside: avoid;
} Use thead elements to automatically repeat headers on each page:
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}Here's a complete example showing a long table that spans multiple pages with proper header repetition and row break prevention:
This example demonstrates a transaction report with 50+ rows that automatically spans multiple pages. Notice how:
When tables are too wide for the page, you have several responsive strategies beyond landscape orientation.
The simplest approach is reducing font size for table content while keeping headers readable:
table { font-size: 8pt; }
th { font-size: 9pt; }
td { padding: 4px 6px; }Use CSS to hide non-essential columns in the PDF version:
@media print {
.optional-column { display: none; }
}For extremely wide tables, consider splitting into multiple related tables with shared IDs for reference.
tbody tr:nth-child(odd) { background-color: #ffffff; }
tbody tr:nth-child(even) { background-color: #f9fafb; }tr.total-row {
font-weight: bold;
background-color: #dbeafe !important;
border-top: 2px solid #3b82f6;
}
tr.warning { background-color: #fef3c7 !important; }
tr.error { background-color: #fee2e2 !important; }
tr.success { background-color: #d1fae5 !important; }td.number, td.currency, td.percentage {
text-align: right;
font-variant-numeric: tabular-nums;
} Invoices require clear, professional table formatting with proper totals and tax calculations. Use semantic HTML with tfoot for totals.
Complex financial reports often require multiple related tables with consistent styling. Use landscape orientation and reduced font sizes.
Automated data exports with dynamic table generation. Libraries like Pandas (Python) can convert DataFrames to HTML tables easily.
import pandas as pd
import requests
df = pd.read_sql('SELECT * FROM sales', connection)
table_html = df.to_html(index=False, classes='data-table', border=0)
html = f'<html><head><style>...</style></head><body>{table_html}</body></html>'
response = requests.post(
'https://e.customjs.io/html2pdf',
json={'input': {'html': html}},
headers={'x-api-key': 'YOUR_API_KEY'}
)
with open('export.pdf', 'wb') as f:
f.write(response.content)CustomJS offers native modules for Make.com and n8n, making it easy to automate table-to-PDF conversion in no-code workflows.
Learn more in our Make.com integration guide.
Check out our n8n integration documentation.
thead, tbody, and tfoot elements for better PDF rendering.@page rules to add page numbers.Solutions: Switch to landscape orientation, reduce font size (8-9pt), hide non-essential columns, use abbreviations in headers, or split into multiple tables.
Solution: Use page-break-inside: avoid on tr elements.
Solution: Use thead { display: table-header-group; } in your CSS.
Solution: Use vertical-align: top on table cells or set fixed heights with overflow handling.
CustomJS offers transparent, developer-friendly pricing for HTML to PDF conversion:
Each HTML to PDF conversion counts as one API call, regardless of table complexity or page count. No hidden fees or per-page charges.
In portrait orientation, 4-5 columns work well. In landscape, you can fit 8-10 columns comfortably. Beyond that, consider reducing font size or splitting tables.
Yes! Use thead elements with display: table-header-group CSS property. CustomJS fully supports this feature.
CustomJS can handle tables with thousands of rows. The API accepts HTML content up to 10MB. For very large datasets, consider pagination or splitting into multiple PDFs.
Use page-break-inside: avoid on tr elements. This ensures each row stays together on one page.
Yes! CustomJS supports web fonts via @font-face or Google Fonts. Include font declarations in your HTML's style section.
Use landscape orientation (@page { size: A4 landscape; }), reduce font size, hide optional columns, or split into multiple tables.
Yes! Use CSS @page rules with @bottom-right or @bottom-center to add page numbers. See our pagination guide for details.
Yes! CustomJS offers native modules for both Make.com and n8n, making it easy to automate table-to-PDF workflows.
Converting HTML tables to PDF doesn't have to be frustrating. With the right CSS strategies, proper page break management, and responsive design patterns, you can create professional, print-ready table PDFs that handle any data complexity.
The key takeaways: use landscape orientation for wide tables, prevent row breaks with CSS, repeat headers on multi-page tables, and test with realistic data. CustomJS's HTML to PDF API handles all these scenarios reliably with full CSS support.
Whether you're generating financial reports, data exports, invoices, or analytical dashboards, CustomJS provides the flexibility and reliability you need. With 600 free conversions per month and native Make.com/n8n integration, it's the ideal solution for automated table-to-PDF workflows.
Get started free today
Continue reading on similar topics
Generate professional PDFs in Power Automate with CustomJS. Create invoices, receipts, reports, and certificates with custom HTML templates, QR codes, and advanced formatting. No Azure Functions required.
Create professional HTML receipt templates that convert perfectly to PDF. Use our free receipt PDF generator or choose from 5 customizable templates for e-commerce, SaaS, and service businesses.
Master async JavaScript execution in PDF generation. Learn the window.__RENDER_DONE__ pattern for reliable HTML to PDF conversion with QR codes, charts, and dynamic content.