Click here to Skip to main content
15,901,284 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have working code for importing HTML , sliding the html code into the middle of a DOCX document and outputting. All well and good.

What Im having is an issue with tables and the space between tables.

Take for example:

<!DOCTYPE html >
</head><body>
<table border="1"><tr><td>Table 1</td></tr></table>
<table border="1"><tr><td>Table 2</td></tr></table>
</body></html>


When output the tables in the docx have no space between them - good, thats the same as the HTML if viewed.
If I put a
<p></p>
or
<br>
or css margins I end up with too much space between the tables.

Im looking for a workaround so that the space between the tables is just one empty line, rather than one huge empty line. Ive tried paragraph linespacing feeding directly into the control after I have imported the HTML into a raddocument but that just seems to affect overall line-spacing, even within the table itself.

I just want a single empty line. If I use the radrichtext box editor and press SHIFT+ENTER and delete the larger line - it works but that means manual intervention and I cannot do this as its part of a mail merge function.

Any ideas on how to get around this issue? Thanks!

What I have tried:

br's, paragraphs, css margins, css table spacing
Posted
Comments
Andre Oosthuizen 2-Jun-23 5:50am    
You can try to add a margin between each table using
table {
  border: 1px solid black;
  margin-bottom: 1em; /* Adjust the margin between tables */
}
in your style block.
Member 12561559 2-Jun-23 6:30am    
tried that, didnt work in the telerik component. Found the solution below - sods law I find it shortly after posting here. But might be useful for others hitting the same bug.
Member 12561559 2-Jun-23 6:30am    
Found out how to go about fixing it.
I'll explain the solution in a moment, but this is how I found it:
After doing a manual edit in a radrichtextbox and making it do a single line entry rather than a huge gap - I exported the contents BACK OUT as a HTML file and took a peek at the coding.

There were several CSS entries with a paragraph between each table.
It all boiled down to this,
a css entry:

.psmall { line-height: 1.15; 



then at the end of each table putting this:

</table><p class="psmall "><span> </span></p>


and theres just a small gap now between tables.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900