HTML 表格在 Outlook 电子邮件中出现扭曲

标签 html css email outlook

我创建了一个电子邮件模板,这封电子邮件从我的应用程序 (Oracle UCM) 发送到 outlook 2010。问题是我的工作流历史表(下面的代码)在任何移动设备上检查时会变形并向左移动但是在桌面上查看时,整个电子邮件看起来不错。

    <table border="1"cellspacing=0 cellpadding=0 width="95%" align="center">
    <tr>
       <td align="center" colspan="2" style='width:10.0%; background:#A5CEF7'>
      <p><span style='font-size:18.0pt;font-family:"Calibri","sans-serif";color:red'>DMS</span><span style='font-size:15.0pt;font-family:"Calibri","sans-serif";color:red'> - <$xSubDocType$> document for <$xClientName$> PID: <$xProject_ID$> is in your workflow &nbsp;</span></p>
      </td>
    </tr>

    <tr>
       <td align="left" colspan="2" style='width:10.0%;font-family:"Calibri","sans-serif";background:#A5CEF7;font-size:12.0pt'>
      <p>
       <b>
       Click on <a href="mailto:abx@xyz.com?subject=<$regexReplaceAll(xClientName,"&","")$> <$xSubDocType$> | PID: <$xProject_ID$> | DID:<$dID$> | Approve&body=%0D%0A">Approve</a> or 
        <a href="mailto:abx@xyz.com?subject=<$regexReplaceAll(xClientName,"&","")$> <$xSubDocType$> | PID: <$xProject_ID$> | DID:<$dID$> | Reject&body= Note:%0D%0A -Enter rejection reasons(Remove this Note):">Reject</a> to take action on this document through email.Please remove your signatures(if any)</b><br><br> 
      </span>
        <span style='font-size:10.0pt;font-family:"Calibri","sans-serif";color:red;align="center"'>** Please note: Do not make any changes</span>  
      </p>
      </td>
    </tr>

    <tr>
     <td rowspan="2" width="40%";height="1000" style='background:#E6E6D8;min-width:200px'>                    
        <p style="padding-left:10px">
                    <span style='font-size:12pt;font-family:Calibri,sans-serif;color:black;font-weight:bold;left:500px'>
                                    <b><u>Content Info</u>&nbsp;</b></span><br>
                                    <br>
                    <span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
                                    <b>Content ID:&nbsp;</b></span>
                    <span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
                                    <$dDocName$></span><br>

                    <span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
                                    <b>Document Owner:&nbsp;</b></span>
                    <span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
                                   <$UserFullName$></span><br>

                    <span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
                                    <b>Client:&nbsp;</b></span>
                    <span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
                                    <$xClientName$></span><br>
                    <span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold">
                                    <b>Project Name&nbsp;</b></span>
                    <span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
                                    <$xProjectName$></span><br>
    </p>

    <p style="font-family:Calibri,sans-serif;font-size:10pt;padding-left:15px">
    <$if IsNotifyOnly or wfAction like "APPROVE"$>
                    [ <a href="<$HttpCgiPath$>?IdcService=DOC_INFO&idcToken=<$idcToken$>&dID=<$dID$>&dDocName=<$url(dDocName)$>&Auth=Intranet" style="color:993333;width:300px;font-family:Calibri,sans-serif;font-weight:normal">
                                    <$lc("wwDocumentInfo")$></a> ]</p>
    <$else$>
                    [ <a href="<$HttpCgiPath$>?IdcService=REVIEW_WORKFLOW_DOC&idcToken=<$idcToken$>&dDocName=<$url(dDocName)$>&Auth=Intranet" style="color:993333;width:300px;font-family:Calibri,sans-serif;font-weight:normal">
                                    <$lc("wwWfReviewWorkflowItem")$></a> ]</p>

    <$endif$>            
    </td>                       
    </tr>

    <tr>        
     <td align ="center" vertical-align="top" width="60%" style='background:#E6E6D8;min-width:600px'>    
     <p style="padding-left:10px">       
    <!--    <td align ="center" vertical-align="top" width="60%" bgcolor="#E6E6D8">        -->
        <div style="display:none">  
        <$executeService("GET_SENDTOWORKFLOW_HISTORY_EMAIL_DETAILS")$>
             <$numrowSTOWFH = rsNumRows("SendtoWorkflowActionHistory")$>
            <$executeService("GET_WORKFLOW_HISTORY_EMAIL_DETAILS")$>
             <$numrowWFH = rsNumRows("WorkflowActionHistory")$>      
             <$if numrowWFH gt 0$>                   
                    <$rsRename("WorkflowActionHistory", "rsNewName")$>
             <$else$>                    
                    <$rsRename("SendtoWorkflowActionHistory", "rsNewName")$>
            <$endif$>   

        </div>  

                <span style="font-family:Calibri,sans-serif;font-size:12pt">
                    <b>Reason:&nbsp;</b></span>
                <span style="font-family:Calibri,sans-serif;font-size:12pt;color:blue">
                    <b><$if xPurposeForSubmission$><$getFieldViewValue("xPurposeForSubmission",xPurposeForSubmission,"Reason")$><$endif$></span></b><br><br>            

        <table style="position:absolute;width:97.0%;left:145px" cellpadding="3" cellspacing="0" id="Table2">   
                    <tr>                
                    <td style="font-family:Calibri,sans-serif;font-size:12pt" colspan="7">
                                <b>Recent workflow history (Maximum Last 5)</b>
                    </td>
                    </tr>
                <tr>  

                    <td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:130px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action Date</b></span></div>
                    </td>

                    <td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:140px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action By </b></span></div>
                    </td> 

                    <td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:70px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action </b></span></div>
                    </td>

                    <td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:150px;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Action Type </b></span></div>
                    </td>

                    <td style="background-color:#A5CEF7;border:1px #000000 solid;text-align:center;vertical-align:top;width:250;height:2px;"><div><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:bold"><b>Comments</b></span></div>
                    </td>
                </tr>      
            <$loop rsNewName$>
                <tr>        
    <!-- ACTION DATE cell -->

                    <td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:130px;height:1px;">
                    <div class="xuiListCellDivCenter" nowrap><span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
                    <$dActionDate$>&nbsp;</span></div>
                    </td>

    <!--Send To cell -->

                    <td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:100px;height:1px;">
                    <div class="xuiListCellDivCenter" nowrap>
                    <span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">
                    <$if strLength(getValueForSpecifiedUser(xWF_SendTo, "dFullName")) gt 0 $>
                        <$getValueForSpecifiedUser(xWF_SendTo, "dFullName")$>      
                    <$else$>
                        <$xWF_SendTo$>            
                        <$endif$>&nbsp;</span></div>
                    </td>

    <!-- ACTION cell -->
                    <td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:70px;height:1px;">
                    <div class="xuiListCellDivCenter" nowrap>
                    <span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal">     
                    <$dAction$>&nbsp;</span></div>
                    </td>

    <!-- Approval Type cell -->
                    <td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:150px;height:1px;">
                    <div class="xuiListCellDiv" nowrap>
                    <span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal"><$ApprovalType$>&nbsp;</span></div>
                    </td>
    <!-- Comments cell -->

                    <td class="<$rowClass$>" style="background-color:transparent;border:1px #000000 solid;text-align:center;vertical-align:top;width:250px;height:1px;">
                    <div class="xuiListCellDiv" nowrap>
                    <span style="font-family:Calibri,sans-serif;font-size:10pt;font-weight:normal"><$strSubstring(xWorkflowComments,0,100)$>&nbsp;</span> </div>
                    </td>
                </tr>                               
                <$endloop$>

            <tr>
                    <td   colspan="2">
                    [<a href="<$HttpCgiPath$>?IdcService=GET_WORKFLOW_HISTORY_BYNAME&idcToken=<$idcToken$>&dID=<$url(dID)$>&dDocName=<$url(dDocName)$>" style="color:993333;width:50px;font-size:10pt;font-family:Calibri,sans-serif;font-weight:normal">
                    <$lc("View detailed workflow history")$></a>]                       
                    </td>
            </tr>

            </table>
        </td>
    </tr>

    </table>

最佳答案

position:absolute;设置在第 80 行导致表格占据固定位置,因此出现问题。

还设置了 height="1000"进一步设置列的高度。删除它,我现在很高兴

关于HTML 表格在 Outlook 电子邮件中出现扭曲,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22606497/

相关文章:

perl - 一次处理一封邮件

javascript - 如何在 flexbox carousel 的中间正确定位上一个和下一个按钮?

javascript - 将按钮更改为不同的背景 onClick

css - CSS 中规则的顺序或顺序重要吗?

html - 用于 html 电子邮件的富文本编辑器?

linux - 根据用户输入的文件映射

javascript - .change() .css 宽度

android - 移动应用程序开发

html - Wordpress 内容 - 边框未扩展到全宽

jQuery:更改背景颜色的简单 .css 行在 Chrome 中不起作用