Telerik HTML tables and docx output

Question

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 1-Jun-23 23:40pm

Member 12561559

Add a Solution

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.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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