How to Fix TCPDF Tables Rendering Side by Side

Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.

If two TCPDF HTML tables appear next to each other but should be stacked, remove floats from the tables or their wrappers, clear any earlier float, and give each table a width that fits the printable page area. TCPDF’s HTML renderer follows float and table-clearance behavior, while CSS flexbox and grid are not implemented. If you intend a two-column layout, put both inner tables inside the cells of one outer table instead of floating two separate tables.

Why TCPDF puts tables side by side

writeHTML() lays out the HTML it receives; the result can differ from the layout suggested by a browser-oriented stylesheet. In particular, a table with float:left or float:right, or a wrapper with a float, can leave room for the next table on the same line. TCPDF’s documentation describes the relationship directly: “Floats and table clearance interact as CSS specifies.”

#	Preview	Product	Price
1		PDF Explained: The ISO Standard for Document Exchange	$14.41	Buy on Amazon
2		Adobe Acrobat 6 PDF For Dummies	$13.00	Buy on Amazon
3		Debugging: The 9 Indispensable Rules for Finding Even the Most Elusive Software and Hardware...	$13.39	Buy on Amazon

That makes side-by-side placement primarily a layout-flow issue, not evidence that the PDF viewer has rearranged the document. Other contributors can include a table or wrapper width that does not fit the available content area, or malformed generated markup that changes where one element ends and the next begins.

TCPDF’s HTML and CSS documentation, updated 21 September 2026, states: “CSS flexbox and grid are not implemented.” Replacing floats with flexbox or grid is therefore not a dependable fix in TCPDF’s HTML renderer. Prefer simple block flow for stacked tables, or table markup for an intentional two-column structure.

#1 Best Overall

Sale

PDF Explained: The ISO Standard for Document Exchange

$14.41

Buy on Amazon

Stack tables vertically with ordinary flow

For tables that should appear one after another, remove float rules and explicitly clear the second table. This example sets both tables to the available width; confirm that width fits the page’s printable content area in your document.

<style>
  table.tcpdf-table {
    width: 100%;
    float: none;
    clear: both;
    border-collapse: collapse;
  }
  .tcpdf-table + .tcpdf-table {
    clear: both;
  }
</style>

<table class="tcpdf-table">
  <thead>
    <tr><th>Item</th><th>Value</th></tr>
  </thead>
  <tbody>
    <tr><td>First table</td><td>Example</td></tr>
  </tbody>
</table>

<table class="tcpdf-table">
  <thead>
    <tr><th>Item</th><th>Value</th></tr>
  </thead>
  <tbody>
    <tr><td>Second table</td><td>Example</td></tr>
  </tbody>
</table>

Use the styles in the HTML that you actually pass to writeHTML(). If a shared application stylesheet applies floats, either remove the rule at its source or override it in the generated markup. An override is useful when a shared stylesheet cannot be changed, but removing an unintended float at its source avoids carrying an unnecessary layout rule into other output.

The essential pieces are float: none so each table does not claim a floated position, and clear: both so a table does not begin alongside an earlier left or right float. The adjacent-table selector makes the intended separation explicit for the second table and later adjacent tables. Keep styles straightforward; a browser-only layout technique will not become supported simply because it is included in the HTML string.

Check the available width

A width: 100% table uses the width available to it in the rendered layout. The relevant limit is the printable content area, not necessarily the physical width of the paper: page margins and any containing cell or wrapper reduce what fits. If two columns are intentional, make sure the column widths plus padding, borders, and margins fit inside that area. TCPDF accepts pixel and document-unit widths, so use consistent widths that make sense for the chosen page layout.

Rank #2

Sale

Adobe Acrobat 6 PDF For Dummies

• Used Book in Good Condition

$13.00

Buy on Amazon

Keep the table structure valid

Each table should contain rows, and each row should contain cells. Use thead, tbody, th, and td consistently when the table has headers or repeated page content. The official E043 HTML-tables example demonstrates these structures as well as colspan and rowspan. Valid, clearly nested markup makes it easier to tell whether a float or a malformed wrapper is responsible for the placement.

Use one outer table for an intentional two-column layout

If the desired result really is two tables side by side, avoid positioning two independent floated tables. Put one inner table in each cell of a single outer table. The outer row establishes the columns, and each inner table is constrained to its cell.

<table width="100%">
  <tr>
    <td width="50%">
      <table width="100%">
        <tr><th>Left column</th></tr>
        <tr><td>Left table content</td></tr>
      </table>
    </td>
    <td width="50%">
      <table width="100%">
        <tr><th>Right column</th></tr>
        <tr><td>Right table content</td></tr>
      </table>
    </td>
  </tr>
</table>

This example gives each column half of the outer table’s width. It is a layout pattern, not a guarantee that every real table will fit at those proportions: long text, cell padding, borders, and the printable page width still matter. Adjust column widths and cell formatting together so the combined layout stays within the content area. For vertically stacked tables, do not use this structure merely to work around floats; use ordinary flow and clearing instead.

Debug the HTML that TCPDF receives

When the result remains wrong, inspect the final HTML string after template rendering and application-side transformations. The source template alone may not show a wrapper or style that is present in the actual string passed to TCPDF.

Rank #3

Sale

Debugging: The 9 Indispensable Rules for Finding Even the Most Elusive Software and Hardware Problems

• Used Book in Good Condition

$13.39

Buy on Amazon

1. Inspect the generated string. Search for float, width declarations, unexpected wrappers, and tags that open but do not close. Check both table elements and their ancestors.
2. Reduce the case. Temporarily remove floats, flex, grid, margins, and percentage widths. Render one table at a time, then add a second table in simple block flow. This isolates whether the placement comes from the layout rules or from the markup.
3. Restore only supported layout rules. Set an explicit width that fits the content area. Add back only the styles needed for the output. For stacked tables, keep floats off and clear the next table or a block immediately before it.
4. Validate nesting. Confirm that every table contains rows, each row contains cells, and table wrappers close where intended. Compare the structure with TCPDF’s official E043 HTML-tables example.
5. Check whitespace-sensitive alignment separately. If alignment changes when the HTML is indented, use the TCPDF 7 workaround below; that symptom is distinct from a float causing side-by-side placement.

Reducing a reproduction to one table at a time is useful because a missing clear or an open wrapper can affect elements that follow it. Once a minimal case stacks correctly, restore the real content and styles in small groups. The first group that changes the result usually identifies which rule or markup fragment needs attention.

Handle the TCPDF 7 whitespace-sensitive alignment symptom

TCPDF issue #875 reports a whitespace-sensitive alignment regression in TCPDF 7: indentation around cell content or whitespace after a line break can change text alignment. If that is the problem you see, preprocessing the HTML to remove boundary whitespace is a reported workaround. It is not the general fix for two floated tables; apply it when the alignment symptom matches.

$html = preg_replace('#(<td[^>]*>)s+#', '$1', $html);
$html = preg_replace('#s+(</td>)#', '$1', $html);
$html = preg_replace('#(<brs*/?>)s+#i', '$1', $html);
$pdf->writeHTML($html, true, false, true, false, '');

Because the patterns operate on HTML strings, check the resulting markup before using this as a broad transformation. The reported patterns target whitespace after opening cells, before closing cells, and after br tags. If your content depends on intentional spacing at those boundaries, verify that preprocessing does not remove meaningful whitespace.

Choose the fix that matches the layout

Common failure modes and what to change

• The second table still shares a line. Look for a float on its wrapper as well as on the table itself. Remove the float for stacked content, then add clear: both to the second table or a block immediately before it.
• The tables stack, but one clips or extends beyond the content area. Reduce its width or adjust the surrounding column widths. Check that the total width, including padding, borders, and margins, fits the printable area.
• The HTML works differently from the source template. Inspect the final string passed to writeHTML(); template rendering may leave an unexpected wrapper, float, or unclosed tag.
• A browser fix has no effect in the PDF. Check whether it relies on flexbox or grid. TCPDF’s HTML renderer does not implement those layout systems; use one of the supported structures above.
• Only alignment changes when markup is indented. Check for whitespace at cell boundaries and after br, then consider the TCPDF 7 preprocessing workaround rather than changing table flow.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server, not a TCPDF layout fix. If you need a clean capture of a rendered webpage while validating a web-based report or preview, one GET request can return an image or PDF. The example below requests a WebP capture of a page; replace the URL with your target. See the ScreenshotNeo API documentation for options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers say which result occurred. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.

Learn about ScreenshotNeo, or sign up free for 1,000 screenshots a month with no card.

Quick Recap

SaleBestseller No. 1

PDF Explained: The ISO Standard for Document Exchange

$14.41

SaleBestseller No. 2

Adobe Acrobat 6 PDF For Dummies

Used Book in Good Condition

$13.00

SaleBestseller No. 3

Debugging: The 9 Indispensable Rules for Finding Even the Most Elusive Software and Hardware Problems

Used Book in Good Condition

$13.39

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.