首页 > 解决方案 > itext7 HTML to PDF 忽略列宽

问题描述

我正在使用 iText7 的 pdfHtml 插件将 HTML 表格转换为 PDF。但是我不能让它遵守定义的列宽。

我正在使用HtmlConverter.ConvertToDocument将我的 HTML 转换为 PDF。

这是我的桌子:

table {
  border-collapse: collapse;
}

table,
td,
th {
  border: 1px solid black;
}

.gray-header {
  background-color: lightgray;
}
<table style="table-layout: fixed; width: 700px;">
  <thead>
    <tr class="gray-header">
      <th rowspan="2" style="width: 50px;">A</th>
      <th rowspan="2" style="width: 250px;">B</th>
      <th colspan="4" style="width: 400px;">COLSPAN</th>
    </tr>
    <tr class="gray-header">
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
      <td>F</td>
      <td>G</td>
    </tr>
  </tbody>
</table>

这是 PDF 中的表格

在此处输入图像描述

A 列和 B 列的宽度相同。B 应该是 A 的 5 倍。

标签: c#htmlpdfitextitext7

解决方案


<col>解决方法是在位于的标签中指定列宽定义<colgroup>

<table style="table-layout: fixed; width: 700px;">
  <colgroup>
    <col style="width: 50px;"/>
    <col style="width: 250px;"/>
    <col/>
    <col/>
    <col/>
    <col/>
  </colgroup>
  <thead>
  <tr class="gray-header">
    <th rowspan="2">A</th>
    <th rowspan="2">B</th>
    <th colspan="4">COLSPAN</th>
  </tr>
  <tr class="gray-header">
    <th>C</th>
    <th>D</th>
    <th>E</th>
    <th>F</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>F</td>
    <td>G</td>
  </tr>
  </tbody>
</table>

上表结构的可视化 PDF 结果:

结果


推荐阅读