如何优化SAS EG 8生成的HTML邮件报表表格样式？

问题背景 #

使用SAS EG 8生成自动发送给利益相关者的HTML邮件报表，当前代码生成的表格存在边框对齐错位问题，需修复该问题并提升报表整体美观度，工具版本固定为SAS EG 8无法更换。

现有代码 #

filename output email 
from=("")
subject= "Update as at &RUN_DT."
to=("")
ct= "text/html"
type="text/html";
     
ods html body=output style=styles.festival ;
ods noproctitle;

PROC FORMAT;
VALUE WFMT LOW-0.500 = '#FF0000'
            0.519 - 0.994 = '#FFA500'
            0.995 - HIGH = '#008000';
RUN;

TITLE "Update as at &RUN_DT.";FOOTNOTE;
PROC REPORT DATA=HUBCRMS16 NOWD MISSING
STYLE(HEADER)=[FONT_SIZE=9PT BORDERSTYLE=SOLID BACKGROUND=#94b7ff FOREGROUND=BLACK BORDERWIDTH=1PX]
STYLE(COLUMN)=[FONT_SIZE=8PT BORDERSTYLE=SOLID BORDERWIDTH=1PX]
STYLE(REPORT)=[BORDERSTYLE=SOLID BORDERWIDTH=1PX];;
COLUMN EMPE_NM ASSIGNED TOUCHED TOUCHED_PRECENT UNTOUCHED UNTOUCHED_PRECENT OPEN OPEN_PRECENT SUCCESSFUL SUCCESSFUL_PERCENT DECLINE DECLINE_PRECENT UNSUCCESSFUL UNSUCCESSFUL_PRECENT CONTACTED CONTACTED_PRECENT UNCONTACTED UNCONTACTED_PRECENT _DUMMY;
DEFINE EMPE_NM / GROUP;
DEFINE ASSIGNED / FORMAT=COMMA32.;
DEFINE TOUCHED / FORMAT=COMMA32.;
DEFINE UNTOUCHED / FORMAT=COMMA32.;
DEFINE OPEN / FORMAT=COMMA32.;
DEFINE SUCCESSFUL / FORMAT=COMMA32.;
DEFINE DECLINE / FORMAT=COMMA32.;
DEFINE UNSUCCESSFUL / FORMAT=COMMA32.;
DEFINE CONTACCTED / FORMAT=COMMA32.;
DEFINE UNCONTACCTED / FORMAT=COMMA32.;
DEFINE TOUCHED_PRECENT / COMPUTED FORMAT=PERCENT9.2 STYLE={BACKGROUND=WFMT.};
DEFINE UNTOUCHED_PRECENT / COMPUTED FORMAT=PRECENT9.2 STYLE={BACKGROUND=WFMT.};
DEFINE OPEN_PRECENT / COMPUTED FORMAT=PRECENT9.2 STYLE={BACKGROUND=WFMT.};
DEFINE SUCCESSFUL_PERCENT / COMPUTED FORMAT=PERCENT9.2 STYLE={BACKGROUND=WFMT.};
DEFINE DECLINE_PRECENT / COMPUTED FORMAT=PERCENT9.2 STYLE={BACKGROUND=WFMT.};
DEFINE UNSUCCESSFUL_PRECENT / COMPUTED FORMAT=PERCENT9.2 STYLE={BACKGROUND=WFMT.};
DEFINE CONTACTED_PRECENT / COMPUTED FORMAT=PRECENT9.2 STYLE={BACKGROUND=WFMT.};
DEFINE UNCONTACTED_PRECENT / COMPUTED FORMAT=PRECENT9.2 STYLE={BACKGROUND=WFMT.};
DEFINE _DUMMY / COMPUTED NOPRINT;
RBREAK AFTER / SUMMARIZE;

COMPUTE _DUMMY / CHAR LENGTH=32;
    TOUCHED_PRECENT = _C3_ / _C2_ ;
    UNTOUCHED_PRECENT=_C4_ / _C2_;
    OPEN_PRECENT=_C5_ / _C3_; 
    SUCCESSFUL_PERCENT = _C6_ / _C3_;
    DECLINE_PRECENT= _C7_ / _3_;
    UNSUCCESSFUL_PRECENT = _C8_ / _C3_;
    CONTACTED_PRECENT= _C9_ / _C3_;
    UNCONTACTED_PRECENT= _C10_ / _C3_; 

ENDCOMP;
RUN;

ods html close;
ods noproctitle;

问题说明 #

截图中黄色高亮区域并非裁剪问题，而是表格边框存在对齐错位，具体表现为单元格边框线条不重合、偏移。

优化方案 #

一、边框错位修复方案 #

1. 启用边框合并模式
   在PROC REPORT的STYLE(REPORT)选项中添加BORDERCOLLAPSE=COLLAPSE，强制HTML表格边框合并，从根源解决错位问题：

   STYLE(REPORT)=[BORDERSTYLE=SOLID BORDERWIDTH=1PX BORDERCOLLAPSE=COLLAPSE]
   

2. 修正代码语法错误

   • 修正列名笔误：CONTACCTED → CONTACTED，UNCONTACCTED → UNCONTACTED
   • 修正计算逻辑错误：DECLINE_PRECENT= _C7_ / _3_; → DECLINE_PRECENT= _C7_ / _C3_;
   • 移除PROC REPORT末尾多余的分号

3. 更换兼容ODS样式
   替换style=styles.festival为兼容性更好的style=Styles.HtmlBlue或style=Styles.Monospace，避免特殊样式在邮件客户端渲染异常。

二、美观度提升创意方案 #

1. 分组列视觉区分
   将相关指标分组，通过背景色或边框样式区分，例如给“触达前指标”（ASSIGNED/TOUCHED/UNTOUCHED）设置浅灰色背景，“触达后指标”设置白色背景：

   DEFINE ASSIGNED / FORMAT=COMMA32. STYLE=[BACKGROUND=#F5F5F5];
   DEFINE TOUCHED / FORMAT=COMMA32. STYLE=[BACKGROUND=#F5F5F5];
   DEFINE UNTOUCHED / FORMAT=COMMA32. STYLE=[BACKGROUND=#F5F5F5];
   

2. 表头换行优化
   在表头标题中加入<br>实现换行，减少列宽挤压：

   DEFINE ASSIGNED / FORMAT=COMMA32. DISPLAY="已分配<br>数量";
   DEFINE TOUCHED_PRECENT / COMPUTED FORMAT=PERCENT9.2 STYLE={BACKGROUND=WFMT.} DISPLAY="已触达<br>占比";
   

3. 增强条件格式可读性
   给百分比列添加字体颜色对比，低数值（红色背景）用白色字体：

   PROC FORMAT;
   VALUE WFMT LOW-0.500 = '#FF0000'
               0.519 - 0.994 = '#FFA500'
               0.995 - HIGH = '#008000';
   VALUE FONTFMT LOW-0.500 = 'WHITE'
                 0.519 - HIGH = 'BLACK';
   RUN;
   

   然后在百分比列定义中添加FONTCOLOR=FONTFMT.：

   DEFINE TOUCHED_PRECENT / COMPUTED FORMAT=PERCENT9.2 STYLE={BACKGROUND=WFMT. FONTCOLOR=FONTFMT.};
   

4. 突出汇总行
   给汇总行设置差异化样式，比如加深背景色和边框：

   RBREAK AFTER / SUMMARIZE STYLE=[BACKGROUND=#E6F2FF BORDERWIDTH=2PX BORDERCOLOR=#1E90FF];
   

5. 自适应邮件宽度
   在ODS HTML语句中添加WIDTH=100%，让表格自适应邮件客户端宽度：

   ods html body=output style=Styles.HtmlBlue WIDTH=100%;
   

修正后完整代码示例 #

filename output email 
from=("")
subject= "Update as at &RUN_DT."
to=("")
ct= "text/html"
type="text/html";
     
ods html body=output style=Styles.HtmlBlue WIDTH=100%;
ods noproctitle;

PROC FORMAT;
VALUE WFMT LOW-0.500 = '#FF0000'
            0.519 - 0.994 = '#FFA500'
            0.995 - HIGH = '#008000';
VALUE FONTFMT LOW-0.500 = 'WHITE'
              0.519 - HIGH = 'BLACK';
RUN;

TITLE "Update as at &RUN_DT.";FOOTNOTE;
PROC REPORT DATA=HUBCRMS16 NOWD MISSING
STYLE(HEADER)=[FONT_SIZE=9PT BORDERSTYLE=SOLID BACKGROUND=#94b7ff FOREGROUND=BLACK BORDERWIDTH=1PX]
STYLE(COLUMN)=[FONT_SIZE=8PT BORDERSTYLE=SOLID BORDERWIDTH=1PX]
STYLE(REPORT)=[BORDERSTYLE=SOLID BORDERWIDTH=1PX BORDERCOLLAPSE=COLLAPSE];
COLUMN EMPE_NM ASSIGNED TOUCHED TOUCHED_PRECENT UNTOUCHED UNTOUCHED_PRECENT OPEN OPEN_PRECENT SUCCESSFUL SUCCESSFUL_PERCENT DECLINE DECLINE_PRECENT UNSUCCESSFUL UNSUCCESSFUL_PRECENT CONTACTED CONTACTED_PRECENT UNCONTACTED UNCONTACTED_PRECENT _DUMMY;
DEFINE EMPE_NM / GROUP DISPLAY="员工姓名";
DEFINE ASSIGNED / FORMAT=COMMA32. DISPLAY="已分配<br>数量" STYLE=[BACKGROUND=#F5F5F5];
DEFINE TOUCHED / FORMAT=COMMA32. DISPLAY="已触达<br>数量" STYLE=[BACKGROUND=#F5F5F5];
DEFINE UNTOUCHED / FORMAT=COMMA32. DISPLAY="未触达<br>数量" STYLE=[BACKGROUND=#F5F5F5];
DEFINE OPEN / FORMAT=COMMA32. DISPLAY="已打开<br>数量";
DEFINE SUCCESSFUL / FORMAT=COMMA32. DISPLAY="成功转化<br>数量";
DEFINE DECLINE / FORMAT=COMMA32. DISPLAY="拒绝<br>数量";
DEFINE UNSUCCESSFUL / FORMAT=COMMA32. DISPLAY="未成功<br>数量";
DEFINE CONTACTED / FORMAT=COMMA32. DISPLAY="已联系<br>数量";
DEFINE UNCONTACTED / FORMAT=COMMA32. DISPLAY="未联系<br>数量";
DEFINE TOUCHED_PRECENT / COMPUTED FORMAT=PERCENT9.2 STYLE={BACKGROUND=WFMT. FONTCOLOR=FONTFMT.} DISPLAY="已触达<br>占比";
DEFINE UNTOUCHED_PRECENT / COMPUTED FORMAT=PERCENT9.2 STYLE={BACKGROUND=WFMT. FONTCOLOR=FONTFMT.} DISPLAY="未触达<br>占比";
DEFINE OPEN_PRECENT / COMPUTED FORMAT=PERCENT9.2 STYLE={BACKGROUND=WFMT. FONTCOLOR=FONTFMT.} DISPLAY="已打开<br>占比";
DEFINE SUCCESSFUL_PERCENT / COMPUTED FORMAT=PERCENT9.2 STYLE={BACKGROUND=WFMT. FONTCOLOR=FONTFMT.} DISPLAY="成功转化<br>占比";
DEFINE DECLINE_PRECENT / COMPUTED FORMAT=PERCENT9.2 STYLE={BACKGROUND=WFMT. FONTCOLOR=FONTFMT.} DISPLAY="拒绝<br>占比";
DEFINE UNSUCCESSFUL_PRECENT / COMPUTED FORMAT=PERCENT9.2 STYLE={BACKGROUND=WFMT. FONTCOLOR=FONTFMT.} DISPLAY="未成功<br>占比";
DEFINE CONTACTED_PRECENT / COMPUTED FORMAT=PERCENT9.2 STYLE={BACKGROUND=WFMT. FONTCOLOR=FONTFMT.} DISPLAY="已联系<br>占比";
DEFINE UNCONTACTED_PRECENT / COMPUTED FORMAT=PERCENT9.2 STYLE={BACKGROUND=WFMT. FONTCOLOR=FONTFMT.} DISPLAY="未联系<br>占比";
DEFINE _DUMMY / COMPUTED NOPRINT;
RBREAK AFTER / SUMMARIZE STYLE=[BACKGROUND=#E6F2FF BORDERWIDTH=2PX BORDERCOLOR=#1E90FF];

COMPUTE _DUMMY / CHAR LENGTH=32;
    TOUCHED_PRECENT = _C3_ / _C2_ ;
    UNTOUCHED_PRECENT=_C4_ / _C2_;
    OPEN_PRECENT=_C5_ / _C3_; 
    SUCCESSFUL_PERCENT = _C6_ / _C3_;
    DECLINE_PRECENT= _C7_ / _C3_;
    UNSUCCESSFUL_PRECENT = _C8_ / _C3_;
    CONTACTED_PRECENT= _C9_ / _C3_;
    UNCONTACTED_PRECENT= _C10_ / _C3_; 

ENDCOMP;
RUN;

ods html close;
ods noproctitle;

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