4

In C# I use IronPDF to create an PDF from data out of an MYSQL-database. For layout I use a table and design it with a separated CSS-file.

When I try the generated HTML and CSS in dreamweaver or browser, everything is normal. When I try it in IronPDF, the tableborders in the generated PDF don't show, and textalignment in the table is wrong.

Anyone an idea on how this comes? Is there something in IronPDF that can cause this issue?

HTML:

<html>
<head>
<meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="test.css"/>
<title>test</title>
</head>

<body>
<div id="page"<img src="C:\Dump\SmallLogoBW.png" id="logo" width="250" height="151"/><div class="klantcontact"<h1>Offerte</h1><p>Name</p><p>Address<p><p>Address<p></div><table class="factuurgegevens"><tr><th width="100">Offertenummer:</th><th width="100">2018-018</th><th width="100">BTW-nummer:</th><th width="100"></th></tr><tr><th width="100">Offertedatum:</th><th width="100">06/12/2018</th></tr><tr><th width="100">Vervaldatum:</th><th width="100">26/12/2018</th></tr></table><table id="factuur"><tr id="header"><th class="col1">Omschrijving:<th><th colspan="2">asfd</th><th>Bedrag</th></tr><tr><td></td></tr><tr><td id="col1">Prestatie 1</td><td colspan="2">sdf</td><td class="bedrag">546</td></tr><tr></tr><tr></tr><tr><td></td><td>Project: </td></tr><tr><td colspan="3">BTW-Verlegd (Belasting te voldoen door de medecontractant, KB nr. 1, Art. 20).</td><td class="bedrag"></td></tr></table><div class="factuurvoorwaarden"><p><h2>Factuurvoorwaarden:</h2>Elke niet betaalde factuur brengt van rechtswege en zonder aanmaning een intrest op van 12% per jaar.Wanneer een factuur onbetaald blijft gedurende acht kalenderdagen na de aangetekende verzending van aanmaning, zal de schuldbovendien verhoogd 
worden met 10% van het factuurbedrag, met een minimum van 50,00 euro. Dit geldt als forfaitaireschadevergoeding voor andere onkosten dan het renteverlies en de eigenlijke gerechtskosten. Klachten betreffende de geleverdegoederen en/of diensten worden enkel aanvaard wanneer zij schriftelijk gebeuren binnen 15 kalenderdagen na facturatiedatum van deverrichting. Indien geen betwisting de verlener bereikt, wordt verondersteld dat de klant akkoord gaat met de gefactureerde goederenen/of diensten. In geval van betwisting is het Belgische Recht van toepassing en zal het geschil worden voorgelegd aan de rechtbankenvan het arrondissement Turnhout.</p></div></div>

CSS:

#page {
width: 21cm 29.7cm;
margin: 27mm 16mm 27mm 16mm;
}

#logo
{
float: left;
}

.klantcontact {
float: right;
text-align: right;
}

table{
width: 100%;
}

#header
{
border-bottom: 1px solid #000;
}

#factuur td
{
text-align: left;
width: 25%;
}

.factuurgegevens {
border-top: double;
border-bottom: double;
margin-bottom: 1em;
}

#factuur {
border: 1px solid #000;
height: 30%;
}

#factuur th    {
border-bottom: 1px solid #000;
text-align: left;
width: 30%;
}

.col1
{
width: 10%;
}

.bedrag {
border-left: 1px solid #000;
}
Dave
  • 89
  • 8

3 Answers3

1

Ironpdf only accept Inline CSS thus external CSS doesn't work. So, avoid the use of class in your HTML code. Also use google chrome to check your table layout because Ironpdf render layout as google chrome do. Your code should be like

<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table style="width:100% ; border: 1px solid black ; border-collapse: collapse; ">
  <tr style=" border: 1px solid black ; border-collapse: collapse ">
    <th style=" border: 1px solid black ; border-collapse: collapse ">Firstname</th>
    <th style=" border: 1px solid black ; border-collapse: collapse ">Lastname</th> 
    <th>Age</th>
  </tr>
  <tr style=" border: 1px solid black ; border-collapse: collapse ">
    <td style=" border: 1px solid black ; border-collapse: collapse ">Jill</td>
    <td style=" border: 1px solid black ; border-collapse: collapse ">Smith</td>
    <td style=" border: 1px solid black ; border-collapse: collapse ">50</td>
  </tr>  
</table>
</body>
</html>
Harsh Patel
  • 11
  • 2
1

This Question is old, however this may help others. As previous answers have pointed out, Ironpdf does not support external css from files (though it does support external css from urls.. )

So ideally you provide the css in the same html document you renderer.. this can be done inline or in the html head, I would prefer the html head option as seen below

<!DOCTYPE html>
<html>
    <head>
        <style>
            table{
                width:100%;
                border: 1px solid black;
                border-collapse: collapse; 
            }
            tr, th, td{
                border: 1px solid black;
                border-collapse: collapse;
            }
        </style>
    </head>
    <body>
    <h2>Basic HTML Table</h2>
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th> 
                <th>Age</th>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
            </tr>  
        </table>
    </body>
</html>

This leaves a cleaner html file and works with the current version of ironpdf

Matthew
  • 76
  • 7
1

Update:

IronPDF fully supports CSS3 and Tables. It is 100% compliant to Chrome 2021 since release 2021.9

https://www.nuget.org/packages/IronPdf/

Stephanie
  • 600
  • 13
  • 24