使用iText7.pdfHtml转换HTML为PDF时移除表格TD内空白

开发者阿泽

2026-7-3

解决iText7.pdfHtml转PDF时表格TD单元格空白问题

问题概述

使用iText7.pdfHtml将HTML转换为A4格式PDF时，表格TD单元格内存在无法消除的空白区域（黄色高亮部分），已尝试调整CSS和HTML属性但未解决，开发语言为C#，需彻底移除该空白。

解决方案

针对嵌套表格的样式继承和iText的渲染特性，通过以下步骤修复：

清除所有嵌套表格的默认内外边距，避免浏览器/iText的默认样式干扰
重置单元格的行高与垂直对齐，消除行高带来的额外空白
清理HTML中冗余的换行标签与空白字符
强制覆盖继承的内边距属性
调整页面边距，避免布局挤压导致的空白

修改后的CSS代码

#header {
  position: running(header);
}

#footer {
  position: running(footer);
}

@page {
  margin-top: 50px; /* 缩小顶部边距，避免布局异常 */
  margin-bottom: 20px;
  width: 100%;
  border: 1px solid #000000;
  padding: 20px;
  border-top: none;
  border-bottom: none;

  @top-center {
    content: element(header);
    border: 1px solid #000000;
    margin-top: 40px;
    padding: 20px;
    border-bottom: none;
  }

  @bottom-center {
    content: element(footer);
    border: 1px solid #000000;
    margin-bottom: 40px;
    border-top: none;
  }
}

@page wide {
  size: a4 landscape;
}

#current-page-placeholder::before {
  content: counter(page);
}

#total-pages-placeholder::before {
  content: counter(pages);
}

table { 
  page-break-after:auto;
  page-break-inside:avoid; 
  border-collapse: collapse;
  margin: 0 !important; /* 清除表格默认外边距 */
  padding: 0 !important; /* 清除表格默认内边距 */
}
tr    { page-break-inside:avoid; page-break-after:auto }
td    { 
  page-break-inside:avoid; 
  page-break-after:auto;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2; /* 重置行高，避免额外空白 */
  vertical-align: top; /* 强制顶部对齐 */
}
thead { display:table-header-group }
tfoot { display:table-footer-group }

.pdflogo {
  text-align: left;
  vertical-align: top;
  max-width: 300px;
}

.pagecountersection {
  width: 69%;
  border-spacing: 0;
  font-size: 12px;
}

.pagecountersection td {
   padding: 3px 10px;
   font-size: 12px;
}

.ship_details {
  border: 1px solid #000;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 11px;
  width:100%;
}

.ship_details td {
  border: 1px solid #000;
  font-size: 11px;
  padding: 3px 10px;
}

.noborder td {
  border: 0px solid #000;
}

.ship_header {
  border: 1px solid #000;
  width: 100%;
  border-spacing: 0;
  font-size: 12px;
}
.ship_header td {
  border: 1px solid #000;
  font-size: 20px;
  padding: 3px 10px;
  text-align: right;
}

.ship_notice {
  width:100%; 
  border:0px solid #000000; 
  border-spacing:0; 
  border-collapse: collapse; 
  text-align: right;
  font-size: 16px;
}

.breakbeforediv {
  page-break-before: always !important;
}

.nobreakdiv {
  page-break-inside: avoid !important;
}

.nobreakrow table, td, th {
  page-break-inside: avoid;
}

.bg-gray {
  background: #cccccc;
}

.bg-gray td {
  background: #cccccc;
}

.breakline {
  margin: 5px 0 5px 0;
}

.width40 {
  width:40%;
}

.width60 {
  width:60%;
}

.width100 {
  width:100%;
}

.cellWithTable {
  padding: 0 !important; 
  margin: 0 !important;
}

.cellWithTable table{
  width: 100%;
}

.cellHeight {
  height: 30px !important;
  max-height: 30px !important;
  overflow: hidden !important;
}

.firstCell {
  border-top:none !important;
  border-left:none !important;
  border-right:none !important;
}

.middleCell {
  border-left:none !important;
  border-right:none !important;
}

.lastCell {
  border-bottom:none !important;
  border-left:none !important;
  border-right:none !important;
}

.onlyCell {
  border-top:none !important;
  border-bottom:none !important;
  border-left:none !important;
  border-right:none !important;
}

.ship_nobordernopadding td {
  border: 0px solid #000;
  padding: 0 !important; /* 强制清除内边距 */
}

.ship_withborder td {
  border: 1px solid #000;
}  

#customerTabl td {
  border: 0px solid #000;
  padding: 0 !important; /* 强制清除内边距 */
}

修改后的HTML代码

<div class="breakline"></div>
<table class="ship_details" style="width:100%; border:0px solid #fff; border-spacing:0; border-collapse: collapse;">
    <tr>
        <td valign="top" class="ship_withborder" style="width:59%">
            <table style="width:100%; border:0px solid #fff; border-spacing:0; border-collapse: collapse;">
                <tr>
                    <td style="border:0px solid #000000; padding: 5px 0;" align="center">
                        <strong>Test Folllow Directions</strong>
                    </td>
                </tr>
                <tr>
                    <td style="border:0px solid #000000; padding: 5px 0; width: 100%;">
                        <table style="width:100%; border:0px solid #fff; border-spacing:0; border-collapse: collapse;" id="customerTabl">
                            <tr>
                                <td valign="top" class="ship_nobordernopadding" style="width:49%">
                                    <table style="width:100%; border:0px solid #fff; border-spacing:0; border-collapse: collapse;">
                                        <tr>
                                            <td style="border:0px solid #000000; padding: 5px 0;">
                                                <strong>Customer Address:</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="border:0px solid #000000; padding: 5px 0;">
                                                Someone Something Llc Circle<br>
                                                P.O. Box 123456<br>
                                                Somecity, ST 99999-1000
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td valign="top" class="ship_nobordernopadding" style="width:51%">
                                    <table style="width:100%; border:0px solid #fff; border-spacing:0; border-collapse: collapse;">
                                        <tr>
                                            <td style="border:0px solid #000000; padding: 5px 0;">
                                                <strong>Alternate Address:</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="border:0px solid #000000; padding: 5px 0;">
                                                Parent Company Inc<br>
                                                ABCD Ijkhl & Mnopqrs #111111<br>
                                                1234 Middle Circle Way., Unit #1<br>
                                                <span>Suite 100<br></span> Other City, ST 99999<br>
                                                <span>Phone: 123-456-7890<br></span>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: center; padding: 5px 0;" colspan="2">
                                    <strong>Note:</strong> Please include a copy of this document when mailing this.
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
        <td valign="top" style="max-width:200px; width:200px;">
            <table style="width:100%; border:0px solid #fff; border-spacing:0; border-collapse: collapse;">
                <tr>
                    <td style="border:0px solid #000000; padding: 5px 0 5px 2px;">
                        <strong>ABC/EFG/Ijkl Mnop Abcdefghijklm:</strong>
                    </td>
                </tr>
                <tr style="word-break:break-all;">
                    <td style="border:0px solid #000000; padding: 5px 0 5px 2px;">
                        Sender Name:<br>
                        Someone Withone Llc Circle � Wills<br>
                        <span>Sender Number: 20000000011112</span><br>
                        Ship Name: AB Oceson Lines<br>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

内容的提问来源于stack exchange，提问作者Rag Pudi

使用iText7.pdfHtml转换HTML为PDF时移除表格TD内空白

问题概述 #

解决方案 #

修改后的CSS代码 #

修改后的HTML代码 #

问题概述

解决方案

修改后的CSS代码

修改后的HTML代码