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

Posted 2023-02-22

【中文标题】CSS 在 Netsuite 高级 PDF 模板中为部分表头添加额外的字母间距

【英文标题】：CSS adding additional spacing between letters for part of a table header in a Netsuite advanced PDF Template

【发布时间】：2019-05-20 09:38:19

【问题描述】：

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

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>

我查看了 word-break、letter-spacing 等 css 属性；但我找不到任何似乎适合解决此问题的方法。

有人知道为什么会这样吗？这不会发生在具有相同代码的 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;
  

【问题讨论】：

对不起，但这没有多大意义。当您检查它并查看样式继承时，您的罪魁祸首必须在那里。如果没有办法重现该问题，这是一个很难解决的问题，但其中必须有明确的覆盖。

这可能是页面 CSS 中的一些问题，我无法复制错误，您能否显示该页面或提供其所有代码以便我查看？

代码是 Netsuite 中的高级 PDF 模板，然后生成 PDF，因此我无法在之后检查适用的 CSS。

你能发布一个小提琴或codepen来复制这个问题吗？

不确定 Netsuite 代码是否会发布到 fiddle 或 codepen

【参考方案1】：

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

如何防止我的表格中的字母被拉长？ 默认情况下，表格中的文本是两端对齐的。为了防止这种 你需要设置对齐=“左”。请记住，每个元素都有一个 <p> 隐式放置在数据周围，所以最好的实现方式 这是使用样式表并添加：

td p  align:left 

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

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

这是我用来修复它的代码：

Netsuite/HTML

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

CSS：

  td 
        text-align: left;
        padding: 2px;

      th 
        padding: 2px;
      

这是没有居中对齐时的样子：

这是中心的样子：

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

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

“如果您使用的是 NetSuite Advanced，本文将与您相关 PDF 模板，您遇到了一个不寻常的 HTML 表格 生成的 PDF 中的单元格对齐效果。”

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

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