Html to PDF - table does not have borders

[Daniel]

Hello,

I need to add HTML content to my RadFlowDocument and then export it to PDF. 

The problem is when the HTML text contains a table with borders. Then the borders are not visible in the exported PDF.

C# code - import HTML text:

01.InsertDocumentOptions options = new InsertDocumentOptions
02.{
03.    ConflictingStylesResolutionMode = ConflictingStylesResolutionMode.UseTargetStyle,
04.    InsertLastParagraphMarker = false
05.};
06.var firstPageText = myPdfModel.FirstPageText.ToString();
07.if (firstPageText != null)
08.{
09.    editor.InsertDocument(htmlFormatProvider.Import(firstPageText), options);
10.}

I use Kendo Editor to obtain HTML code. The generated HTML is:

01.<table>
02.   <tbody>
03.      <tr style="height:50%;">
04.         <td style="width:50%;border-width:2px;border-style:solid;border-color:#cc3333;">a</td>
05.         <td style="width:50%;border-width:2px;border-style:solid;border-color:#cc3333;">b</td>
06.      </tr>
07.      <tr style="height:50%;">
08.         <td style="width:50%;border-width:2px;border-style:solid;border-color:#cc3333;">c</td>
09.         <td style="width:50%;border-width:2px;border-style:solid;border-color:#cc3333;">d</td>
10.      </tr>
11.   </tbody>
12.</table>

In Kendo Editor the table looks fine (see screenshot) but in PDF there are no borders.

Is it a bug or do I have to set some options somewhere?

 

If it is a bug, suggest me some workaround please.

 

Best Regards,

Daniel

[Daniel]

I would also like to note that when I set for example the background color, so it is displayed correctly in PDF...

[Martin]

Hi Daniel,

Thank you for the feedback and for sharing the code snippets with us.

I am sorry to hear you are experiencing issues due to inconsistency between shorthand and longhand properties. We have an item logged in our backlog to unify their support: WordsProcessing: Unify the support of CSS shorthand/longhand properties. You can cast your vote for the implementation as well as subscribe to the task by clicking the Follow button so you can receive updates when its status changes.

Until this item is developed I could suggest using the shorthand property for setting borders, or in this case:

<table>
    <tbody>
        <tr style="height:50%;">
            <td style="width:50%;border: 2px solid #cc3333;">a</td>
            <td style="width:50%;border: 2px solid #cc3333;">b</td>
        </tr>
        <tr style="height:50%;">
            <td style="width:50%;border: 2px solid #cc3333;">c</td>
            <td style="width:50%;border: 2px solid #cc3333;">d</td>
        </tr>
    </tbody>
</table>

Regards,
Martin
Progress Telerik

[Daniel]

Ok, thank you for the quick reply.