使用 IronPDF 的表格布局 C#

Question

在 C# 中，我使用 IronPDF 从 MYSQL 数据库中的数据创建 PDF。 对于布局，我使用一个表格并用一个单独的 CSS 文件设计它。

当我在 Dreamweaver 或浏览器中尝试生成的 HTML 和 CSS 时，一切正常。 当我在 IronPDF 中尝试时，生成的 PDF 中的表格边框不显示，并且表格中的文本对齐错误。

有人知道这是怎么来的吗？ IronPDF 中是否有可能导致此问题的内容？

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;
}

Answer 1

更新：

IronPDF 完全支持 CSS3 和表格。 自 2021.9 发布以来，它 100% 符合 Chrome 2021

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

Answer 2

Ironpdf 只接受内联 CSS，因此外部 CSS 不起作用。 因此，请避免在 HTML 代码中使用类。 还可以使用 google chrome 检查您的表格布局，因为 Ironpdf 渲染布局与 google chrome 一样。 你的代码应该像

<!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>

Answer 3

这个问题很旧，但是这可能对其他人有帮助。 正如之前的答案所指出的，Ironpdf 不支持来自文件的外部 css（尽管它确实支持来自 urls 的外部 css..）

因此，理想情况下，您在渲染器的同一 html 文档中提供 css .. 这可以内联或在 html 头中完成，我更喜欢 html 头选项，如下所示

<!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>

这留下了一个更干净的 html 文件并与当前版本的 ironpdf 一起使用

使用 IronPDF 的表格布局 C#

问题描述

3 个解决方案

解决方案1
5 2021-10-01 08:55:30

解决方案2
1 2019-05-20 15:04:21

解决方案3
1 2020-03-04 14:37:10

使用 IronPDF 的表格布局 C#

问题描述

3 个解决方案

解决方案1 5 2021-10-01 08:55:30

解决方案2 1 2019-05-20 15:04:21

解决方案3 1 2020-03-04 14:37:10

解决方案1
5 2021-10-01 08:55:30

解决方案2
1 2019-05-20 15:04:21

解决方案3
1 2020-03-04 14:37:10