Tools to Capture and Convert the Web
GrabzIt's Online Community

DocX - Additional space at the bottom of bottom row of tables

Ask questions on how to capture or convert web pages or HTML into images, CSV, PDF or DOCX documents as well on how to convert videos into animated GIF's using our API.

We are consistenly getting an additional space at the bottom of the bottom row of tables when converting HTML to DocX. Does anyone have expereince as to what might cause this?

Asked by anonymous on the 5th of September 2022

Probably something in your HTML. This doesn't have it:

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table><p>By pressing the button below this HTML will be converted into a Word document.</p><p>Another paragraph</p>

 

Answered by GrabzIt Support on the 5th of September 2022

Here is an example of code in which we are getting an additional row in in the bordered box table row 

 

<div data-block="Export.WBPrintLayout" class="OSBlockWidget" id="$b3"><div data-container="" style="background-color: rgb(255, 255, 255); padding: 30px;"><div data-container="" style="margin-top: 0px;"><div data-list="" class="list list-group OSFillParent" style="position: relative;"><script style="display: flex; height: 0px; width: 100%;"></script><div data-container="" style="margin-top: 20px;"><div data-container="" style="color: rgb(91, 155, 213); font-weight: bold;"><span data-expression="">TECHNICAL SPECIFICATIONS:</span></div><div data-container="" style="margin-top: 20px;"><div data-block="Export.WBCriteriaTypeListPrintLayout" class="OSBlockWidget" id="b3-l1-36_0-$b1"><div data-container="" style="border-color: rgb(255, 255, 255);"><table class="table" role="grid" style="border-width: 0px;"><tbody><tr class="table-row"><td style="border-color: rgb(255, 255, 255); border-style: solid; border-width: 0px; padding: 20px;"><div data-container="" style="margin: 0px 10px 10px; border-color: rgb(255, 255, 255);"><div data-block="Export.WBCriteriaPrintLayout" class="OSBlockWidget" id="b3-l1-36_0-b1-l1_0-38_0-$b1"><div data-container="" style="border-color: rgb(255, 255, 255); border-style: none; border-width: 0px; padding: 0px;"><div data-container="" id="b3-l1-36_0-b1-l1_0-38_0-b1-conCriteriaTypeCoreComprehensive" style="margin-top: 0px; padding: 0px;"><span data-expression="">TECHNICAL SPECIFICATION | CORE AND COMPREHENSIVE | TS1</span></div><div data-container="" id="b3-l1-36_0-b1-l1_0-38_0-b1-ConSectorSubSector" style="margin-top: 0px;"><span data-expression="">Energy-related products | Air conditioners |</span></div><div data-container="" id="b3-l1-36_0-b1-l1_0-38_0-b1-conUseWhen" style="color: rgb(245, 130, 69); font-style: italic; font-weight: normal;"><div data-block="CKFlow.HTMLViewer" class="OSBlockWidget" id="b3-l1-36_0-b1-l1_0-38_0-b1-$b1"><div data-container="" class="cke_contents_ltr" id="b3-l1-36_0-b1-l1_0-38_0-b1-b1-InnerContainer"><p>444444</p></div></div></div></div><table class="table" role="grid" style="border-color: rgb(0, 0, 0); border-width: 0px;"><tbody><tr class="table-row"><td style="border-style: solid; border-color: black; border-width: 1px; padding: 10px; margin-left: -10px;"><div data-container="" style="border-style: solid; border-width: 0px;"><div data-container="" id="b3-l1-36_0-b1-l1_0-38_0-b1-l1_0-40_0-conCriteriaName2" style="color: rgb(31, 77, 120); font-weight: normal;"><div data-container="" style="font-size: 16px; font-weight: bold; height: 21px;"><div data-block="CKFlow.HTMLViewer" class="OSBlockWidget" id="b3-l1-36_0-b1-l1_0-38_0-b1-l1_0-40_0-$b2"><div data-container="" class="cke_contents_ltr" id="b3-l1-36_0-b1-l1_0-38_0-b1-l1_0-40_0-b2-InnerContainer">Ecodesign and applicable standards</div></div></div><div data-container="" id="b3-l1-36_0-b1-l1_0-38_0-b1-l1_0-40_0-conSpace2" style="height: 10px;"><div data-block="CKFlow.HTMLViewer" class="OSBlockWidget" id="b3-l1-36_0-b1-l1_0-38_0-b1-l1_0-40_0-$b3"><div data-container="" class="cke_contents_ltr" id="b3-l1-36_0-b1-l1_0-38_0-b1-l1_0-40_0-b3-InnerContainer"><p><br></p></div></div></div></div><div data-container="" id="b3-l1-36_0-b1-l1_0-38_0-b1-l1_0-40_0-conCriteriaText2" style="margin-top: 0px;"><div data-container="" style="margin-top: 10px;"><div data-block="CKFlow.HTMLViewer" class="OSBlockWidget" id="b3-l1-36_0-b1-l1_0-38_0-b1-l1_0-40_0-$b4"><div data-container="" class="cke_contents_ltr" id="b3-l1-36_0-b1-l1_0-38_0-b1-l1_0-40_0-b4-InnerContainer"><p><span style="color:black;">The equipment must be supplied with installation instructions and user information in printed (on the packaging and / or on documentation accompanying the product) and electronic format, which include the following:</span></p><ol style="list-style-type:lower-latin;"><li><span style="color:black;">Full installation instructions, including:</span><ol style="list-style-type:lower-roman;"><li><span style="color:black;">Instructions specifying that the equipment shall be installed by fully trained fitters</span></li><li><span style="color:black;">Any specific precautions that shall be taken when the equipment is assembled or installed</span></li><li><span style="color:black;">Instructions specifying how the control settings of the equipment shall be adjusted properly after installation</span></li></ol></li><li><span style="color:black;">Information on who the fitter can approach for guidance on installation</span><ol style="list-style-type:lower-roman;"><li><span style="color:black;">Operating instructions for service personnel</span></li><li><span style="color:black;">User information, including:</span></li><li><span style="color:black;">References to competent installers and service personnel</span></li><li><span style="color:black;">Recommendations on the proper use and maintenance of the equipment</span></li><li><span style="color:black;">Advice on how users can minimise the environmental impact of the equipment, in particular information on use to minimise energy consumption</span></li></ol></li><li><span style="color:#c00000;">If applicable</span>, information on how diagnostic results should be interpreted and how they can be improved</li><li><span style="color:black;">Information about which spare parts can be replaced</span></li><li><span style="color:black;">Recommendations on appropriate disposal at the product’s end-of-life</span></li></ol></div></div></div></div><div data-container="" id="b3-l1-36_0-b1-l1_0-38_0-b1-l1_0-40_0-conVerification3" style="margin-top: 10px;"><div data-container="" style="color: rgb(245, 130, 69); font-style: italic; font-weight: normal;"><span style="color: rgb(196, 89, 17);">Proposed verification:</span></div><div data-container="" class="table-row cke_contents_ltr" id="b3-l1-36_0-b1-l1_0-38_0-b1-l1_0-40_0-conVerification4" style="margin-top: 0px;"><div data-block="CKFlow.HTMLViewer" class="OSBlockWidget" id="b3-l1-36_0-b1-l1_0-38_0-b1-l1_0-40_0-$b5"><div data-container="" class="cke_contents_ltr" id="b3-l1-36_0-b1-l1_0-38_0-b1-l1_0-40_0-b5-InnerContainer"><p><span style="color:black;">Tenderers must provide the product Declaration of Conformity confirming that these requirements are met.</span></p></div></div></div></div></div></td></tr></tbody></table><div data-container="" id="b3-l1-36_0-b1-l1_0-38_0-b1-conContainer" style="margin-top: 0px;"><div data-container="" id="b3-l1-36_0-b1-l1_0-38_0-b1-conSpace6" style="height: 10px;"><div data-block="CKFlow.HTMLViewer" class="OSBlockWidget" id="b3-l1-36_0-b1-l1_0-38_0-b1-$b6"><div data-container="" class="cke_contents_ltr" id="b3-l1-36_0-b1-l1_0-38_0-b1-b6-InnerContainer"><p><br></p></div></div></div><div data-container="" id="b3-l1-36_0-b1-l1_0-38_0-b1-conWarnings" style="color: rgb(192, 0, 0);"><span data-expression="">Warning: </span><div data-container="" style="color: rgb(192, 0, 0); font-style: italic;"><div data-block="CKFlow.HTMLViewer" class="OSBlockWidget" id="b3-l1-36_0-b1-l1_0-38_0-b1-$b7"><div data-container="" class="cke_contents_ltr" id="b3-l1-36_0-b1-l1_0-38_0-b1-b7-InnerContainer"><p>555555</p></div></div></div><div data-container="" style="color: rgb(192, 0, 0); font-style: italic;"><div data-block="CKFlow.HTMLViewer" class="OSBlockWidget" id="b3-l1-36_0-b1-l1_0-38_0-b1-$b8"><div data-container="" class="cke_contents_ltr" id="b3-l1-36_0-b1-l1_0-38_0-b1-b8-InnerContainer"><p>6666666</p></div></div></div></div><div data-container="" id="b3-l1-36_0-b1-l1_0-38_0-b1-conSpace5" style="height: 10px;"><div data-block="CKFlow.HTMLViewer" class="OSBlockWidget" id="b3-l1-36_0-b1-l1_0-38_0-b1-$b9"><div data-container="" class="cke_contents_ltr" id="b3-l1-36_0-b1-l1_0-38_0-b1-b9-InnerContainer"><p><br></p></div></div></div><div data-container="" id="b3-l1-36_0-b1-l1_0-38_0-b1-conSpace4" style="height: 10px;"><div data-block="CKFlow.HTMLViewer" class="OSBlockWidget" id="b3-l1-36_0-b1-l1_0-38_0-b1-$b11"><div data-container="" class="cke_contents_ltr" id="b3-l1-36_0-b1-l1_0-38_0-b1-b11-InnerContainer"><p><br></p></div></div></div><div data-container="" id="b3-l1-36_0-b1-l1_0-38_0-b1-conMoreInformationLink" style="margin-top: 0px;"><div data-container="" style="color: rgb(62, 88, 114); font-style: italic;">More information:</div><div data-container="" id="b3-l1-36_0-b1-l1_0-38_0-b1-conMoreInformation2" style="margin-top: 0px;"><div data-block="CKFlow.HTMLViewer" class="OSBlockWidget" id="b3-l1-36_0-b1-l1_0-38_0-b1-$b12"><div data-container="" class="cke_contents_ltr" id="b3-l1-36_0-b1-l1_0-38_0-b1-b12-InnerContainer"><p>More information tab</p></div></div></div></div></div></div></div></td></tr></tbody></table></div></div></div></div><script style="display: flex; height: 0px; width: 100%;"></script></div></div></div></div>

Answered by anonymous on the 5th of September 2022

You are going to have to give a simple example. Not a half page of HTML.

Answered by GrabzIt Support on the 5th of September 2022

It looks to be that having a "<p><br></p>"  after a table is being turned into an additional space within the last row of the table

Answered by anonymous on the 5th of September 2022

That would make sense.

Answered by GrabzIt Support on the 6th of September 2022

What is it about the <br> appearing in or immediatley after table in the html is in an indicator that the conversion will add a newline to the bottom of the last row of the table.  we are using <br> to space out the veritical elemenst as the conversion by design for docx ignores the margin and padding details on the divs?

 

 

Answered by anonymous on the 6th of September 2022

A BR will be cause a new line to be appended. So <p><br/><p> will create a new paragraph and then append a line.

Answered by GrabzIt Support on the 6th of September 2022

So is thinking that perhaos if I just use a <br> without a paragraph tags after the </table>  then perhaps we won't see a new line added into the last row of that table?

Answered by anonymous on the 6th of September 2022

That should append a line to the existing paragraph. But I doubt the spacing would be as large.

Answered by GrabzIt Support on the 6th of September 2022

On further diagnosis it can be showm that paragraphs or formating in a table result in additional spaces being added to the bottom of tables

e.g.  if you convert this HTML to DocX there is no aditional space

 

<table style=" border: 1px solid black;">
<tr>
<th>Example Header</th>

</tr>
<tr>
<td><p>
<span style="color:black;">Candidates must submit evidence that the personnel directly responsible for installation and any ancillary works have relevant experience, qualifications, and training in relation to each of these aspects. This may be in the form of a list of relevant contracts carried out over the previous three years, references, CVs, training records, and / or other evidence of qualifications and experience.</span>
</p></td>
</tr>
</table>

 

but this one does generate an additional space

<table style=" border: 1px solid black;">
<tr>
<th>Example Header</th>

</tr>
<tr>
<td><p>
<span style="color:black;">Candidates must submit evidence that the personnel directly responsible for installation and any ancillary works have relevant experience, qualifications, and training in relation to each of these aspects.&nbsp;</span>
</p>
<p>
<span style="color:black;">This may be in the form of a list of relevant contracts carried out over the previous three years, references, CVs, training records, and / or other evidence of qualifications and experience.</span>
</p></td>
</tr>
</table>

 

Answered by anonymous on the 12th of September 2022

Also if there is any text after a table that has more than one paragragh then then table will add a line at the bottom of the table

 

<table style=" border: 1px solid black;">
<tr>
<th>Example Header</th>

</tr>
<tr>
<td><p>
<span style="color:black;">Candidates must submit evidence that the personnel directly responsible for installation and any ancillary works have relevant experience, qualifications, and training in relation to each of these aspects.&nbsp;</span>
</p>
</td>
</tr>
</table>

<p>
Products that are on
</p>
<p>
Additional row for test
</p>

  

Answered by anonymous on the 13th of September 2022

having a look at the resultant DocX it looks like the last cell of the last row of the table is being given a "after" on the paragraph that is greater than 0  

Answered by anonymous on the 13th of September 2022

If you don't want to have a space just add margin-bottom:0 to the last p tag.

Answered by GrabzIt Support on the 13th of September 2022

Am I doing something wrong? still seeing extra space at bottom of bottom table row following your guidance to add a style.

 

<table style=" border: 1px solid black;">
<tr>
<th>Example Header</th>

</tr>
<tr>
<td><p>
<span style="color:black;">Candidates must submit evidence that the personnel directly responsible for installation and any ancillary works have relevant experience, qualifications, and training in relation to each of these aspects.&nbsp;</span>
</p>
</td>
</tr>
</table>

<p>
Products that are on
</p>
<p style="margin-bottom:0px">
Additional row for test
</p>

Answered by anonymous on the 13th of September 2022

Shouldn't it be the paragraph inside the cell you out the style on?

Answered by GrabzIt Support on the 13th of September 2022