首页 > 解决方案 > 以 AppScript 格式格式化的 HTML 电子邮件中的表格宽度

问题描述

我有一个 Google AppScript 生成用于格式化电子邮件的 HTML 代码。我会输出一个具有相同宽度的列的表格,在 PC 和手机上,表格以不同的方式显示。

其他代码..

body += "<table border=2><tbody><tr>";
  //Inserisco l'header del messaggio
  if (report_headline[0].length > 0) body += CreateHTMLTableRow(report_headline, is_header = true);
  //costruisco la tabella con i dati del report dei messaggi
  if (report_attachement[0].length > 0) body += CreateHTMLTableRow(report_attachement, is_header = false);
  //costruisco la tabella con i dati del report dei pagamenti  
  if (report_payments[0].length > 0) body += CreateHTMLTableRow(report_payments, is_header = false);
  // Close the table tag
  body += "</tbody></table>";

.. 其他代码

//Create an HTML table row from an array
function CreateHTMLTableRow(array,is_header){
  var htmlBody = '';
  var n_row = array.length;
  var n_col = 0;
  var tr_width = 0;
  for (var r = 0; r < n_row; r++) {  
    n_col = array[r].length;
    tr_width = Math.round(100/n_col);
    for (var c = 0; c < n_col; c++) {
      //First row has header <th> tag
      if(is_header){
        if(array[r][c] != ""){
          htmlBody += '<th bgcolor="lightgrey" width="'+tr_width+'"%>'+array[r][c]+"</th>"; 
        }
        else htmlBody += "<th>"+"</th>";        
      }
      //Other rows have the normal <td>
      else {   
        if(array[r][c] != ""){
          htmlBody += '<td width="'+tr_width+'"%>'+array[r][c]+"</td>"; 
        }
        else htmlBody += "<td>"+"</td>";
      }
    }
    htmlBody += "</tr>";
  }  
  return htmlBody;
}  

移动设备上的 gmail 客户端以正确的方式显示表格,而在我的笔记本电脑上,第二行都在同一行中。

标签: htmlemailgoogle-apps-scriptmobilegmail

解决方案


您只定义一次新行的开始:

body += "<table border=2><tbody><tr>";

在尝试追加时

for (var r = 0; r < n_row; r++)

几行。

该问题可以通过如下修改代码来解决:

body += "<table border=2><tbody>";

并且在function CreateHTMLTableRow(array,is_header)

for (var r = 0; r < n_row; r++) {  
   // insert a <tr> tag at the start of every new row
    htmlBody +="<tr>";
    n_col = array[r].length;
    ...
    htmlBody += "</tr>";
  }  
  return htmlBody;

推荐阅读