CSS 在 Netsuite 高级 PDF 模板中为表头的一部分添加字母之间的额外间距

Question

我有一个 html 表格，其中包含 Netsuite 高级 PDF 模板中的表格标题。由于某种原因，标题之一的单词在字母之间有额外的间距，因此不要打印

Delivery
Address

对于它打印的标题

D e l i v e r y
Address

地址部分没有多余的空格。

标头的代码是：

<table class="itemtable" style="width: 100%;"><!-- start items --><#list record.item as item><#if item_index==0>
<thead>
  <tr>
    <th colspan="3">Delivery Address</th>

我看过 css 属性word-break，如letter-spacing、 等；但我找不到任何似乎适合解决这个问题的东西。

有人知道为什么会发生这种情况吗？在具有相同代码的 html 页面中不会发生这种情况，因此不确定为什么在 Netsuite 中会发生这种情况。

CSS 是：

  table {
     font-size: 9pt;
     table-layout: fixed;
  }
  th {
      font-weight: bold;
      font-size: 8pt;
      vertical-align: middle;
      padding: 5px 6px 3px;
      background-color: #e3e3e3;
      color: #333333;
  }
  td {
      padding: 4px 6px;
  }
  td p { align:left }
  b {
      font-weight: bold;
      color: #333333;
  }
  table.header td {
      padding: 0;
      font-size: 10pt;
  }
  table.footer td {
      padding: 0;
      font-size: 8pt;
  }
  table.itemtable th {
      padding-bottom: 10px;
      padding-top: 10px;
  }
  table.body td {
      padding-top: 2px;
  }
  table.total {
      page-break-inside: avoid;
  }
  tr.totalrow {
      background-color: #e3e3e3;
      line-height: 200%;
  }
  td.totalboxtop {
      font-size: 12pt;
      background-color: #e3e3e3;
  }
  td.addressheader {
      font-size: 8pt;
      padding-top: 6px;
      padding-bottom: 2px;
  }
  td.address {
      padding-top: 0;
  }
  td.totalboxmid {
      font-size: 28pt;
      padding-top: 20px;
      background-color: #e3e3e3;
  }
  td.totalboxbot {
      background-color: #e3e3e3;
      font-weight: bold;
  }
  span.title {
      font-size: 28pt;
  }
  span.number {
      font-size: 16pt;
  }
  span.itemname {
      font-weight: bold;
      line-height: 150%;
  }
  hr {
      width: 100%;
      color: #d3d3d3;
      background-color: #d3d3d3;
      height: 1px;
  }
  .synb {
      font-weight: bold;
  }
  .synh7 {
      font-size: 10pt;
      line-height: 120%;
  }
  .synh9 {
      font-size: 8pt;
      line-height: 120%;
  }
  tr.synbordertop td {
      border-top: 1pt solid black;
  }
  span.syntitle {
      font-size: 20pt;
  }
  span.synnumber {
      font-size: 13pt;
  }

Answer 1

编辑：Netsuite 对这些 PDF 使用 BFO。有关此特定问题的信息，请参阅以下内容：https://bfo.com/support/faq/#31

如何阻止表格中的字母被拉伸？
默认情况下，表格中的文本是对齐的。为了防止这种情况，您需要设置align =“left”。请记住，每个元素都有一个 <p>隐式放置在数据周围的元素，因此实现此目的的最佳方法是使用样式表并添加：

td p { align:left }

这将导致所有表数据元素向左对齐。

我以前也遇到过同样的问题。这似乎是 Netsuite 的 PDF 渲染独有的问题。

这是我为修复它而实现的代码：

网络套件/HTML

 <th><p style="align: center;">Color</p></th> 

CSS：

  td {
        text-align: left;
        padding: 2px;
}
      th {
        padding: 2px;
      }

这是没有中心对齐的情况下的外观：

这是中心的样子：

我确信这不是最理想的情况，但这是我能够让它发挥作用的唯一方法，我确信我尝试了许多与您所做的相同的事情。

我使用此链接中的信息作为进一步参考：

“如果您正在使用 NetSuite 高级 PDF 模板，并且在生成的 PDF 中遇到不寻常的 HTML 表格单元格对齐效果，那么本文与您相关。”

http://blog.prolecto.com/2016/03/18/netsuite-advanced-pdf-templates-how-to-fix-table-cell-alignment-justification-anomaly/

希望这有帮助，这至少是我遇到类似问题时实施的解决方案。