Adjacent HTML tables incorrectly merged into a single table in generated DOCX (from HTML to DOCX)
There are no forum posts on this topic! Why don't you write one?
Hello!
I’m using the HTML → DOCX REST API and I’m seeing what looks like incorrect table conversion behavior: multiple sibling HTML <table> elements are being merged into a single Word table in the generated DOCX file.
I've submitted an example HTML code below with 3 tables. My expectation is that each HTML <table> should become its own separate Word table (<w:tbl>). In my input HTML, there are three sibling tables (two standard 2-column tables and a third single-cell table), each wrapped in its own <div>. They should remain three distinct tables in the DOCX.
However, when I get back the DOCX file, it contains only one <w:tbl> block, and the second/third HTML tables appear as additional <w:tr> rows appended to the first table—effectively creating one “mega-table.” This happens even when the tables include semantic elements like <thead> and <tbody>, and even when they are wrapped in separate <div> containers.
I have found that any visible element between tables will keep them separate (e.g., <p>Hello</p>) and also, as a workaround, a nonbreaking space between the tables keeps them separated (<p> </p>). So this is doable but not ideal.
Minimal repro HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Bug: adjacent tables fused</title>
<style>
.wrapper { margin: 16px 0; }
table td, table th { border: 1px solid black; }
</style>
</head>
<body>
<h2>Intended behaviour: tables should remain separate</h2>
<div class="wrapper" id="wrap-1">
<table id="table-1">
<thead>
<tr>
<th>Table 1: Head A</th>
<th>Table 1: Head B</th>
</tr>
</thead>
<tbody>
<tr><td>Table 1: Cell A1</td><td>Table 1: Cell B1</td></tr>
<tr><td>Table 1: Cell A2</td><td>Table 1: Cell B2</td></tr>
<tr><td>Table 1: Cell A3</td><td>Table 1: Cell B3</td></tr>
</tbody>
</table>
</div>
<div class="wrapper" id="wrap-2">
<table id="table-2">
<thead>
<tr>
<th>Table 2: Head A</th>
<th>Table 2: Head B</th>
</tr>
</thead>
<tbody>
<tr><td>Table 2: Cell A1</td><td>Table 2: Cell B1</td></tr>
<tr><td>Table 2: Cell A2</td><td>Table 2: Cell B2</td></tr>
<tr><td>Table 2: Cell A3</td><td>Table 2: Cell B3</td></tr>
</tbody>
</table>
</div>
<div class="wrapper" id="wrap-3">
<table id="callout-table">
<tbody>
<tr>
<td>
<h4>Single-cell table heading</h4>
<p>Single-cell table paragraph 1</p>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Let me know if you are seeing an issue with my code or if this is somehow expected behaviour. I am assuming it is not behaving correctly.
Thank you for your other responses so far! Very helpful.
Paul
