8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

Outlook 经典客户端电子邮件模板表格列被挤压

Thyag 1月前

18 0

表 += `

                table += `<table border="0" width="760" align="center" cellpadding="0" cellspacing="0"  >
                                <tbody><tr bgcolor="#00205c">
                                    <td height="40" style="color: #fff; font-size: 15px; font-weight: 700; font-family: 'Roboto', Arial, sans-serif; padding-left: 10px;">
                                    ${dataset.name}</td>
                                </tr>
                                <tr>
                                    <td bgcolor="#fff" height="5"></td>
                            </tr>
                            </tbody>
                            </table>`;
                      table +=
                        '<table bgcolor="ffffff" border="0" width="760" align="center" cellpadding="0" cellspacing="0" style="margin: 0 auto; border: 1px solid black;">';
                      table += '<thead>';
                      table += '<tr bgcolor="#00205c">';
                      dataset.columns.forEach((field) => {
                        table += `<th align="left" style="color: #fff; font-size: 14px; font-family: 'Roboto', Arial, sans-serif; padding-left: 10px">${titleCase(
                          replaceUnderscores(
                            `${field.label ?? (typeof field === 'string' ? field : field.name)}`
                          )
                        )}</th>`;
                      });
                 
                      table += '</tr></thead>';
                      table += '<tbody>';
                      // Iterate over each record
                      for (const record of dataset.records) {
                        table += '<tr>';
                        // Create a new cell for each field in the record
                        for (const column of dataset.columns) {
                          table += `<td  style = "color: #000; font-size: 15px; font-family: 'Roboto', Arial, sans-serif; padding-left: 20px; padding-top: 8px;padding-bottom: 8px; border-bottom:1px solid #d1d5db;">
                        ${formatDates(record[column.name])}</td>`;
                        }
                        table += '</tr>';
                      }
                      table += '</tbody>';
                      table += '</table>';

我正在制作这样的表格,它在其他客户端(即 Outlook Web 版本、gmail 等)上运行良好,但在 Outlook Classicsic Windows 应用程序中无法运行

output in outlook classic

预期结果

expected

我尝试过条件方法,但没有奏效

我已附上 stackblitz 链接供参考 https://stackblitz.com/edit/stackblitz-starters-cmqgwj?file=index.html

Outlook 客户端的更新截图:它从右侧被截断

帖子版权声明 1、本帖标题:Outlook 经典客户端电子邮件模板表格列被挤压
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Thyag在本站《javascript》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 您能否尝试从表格本身移除宽度,然后设置列宽?如果您能添加生成的 html 以便我们自己测试,那就太好了。

返回
主题数
0
帖子数
0
精华数
0
注册排名
19471
作者最近主题: