Как я могу реструктурировать таблицу HTML в скрипте приложения Google?

Question

У меня есть лист Google с скриптом, который генерирует электронное письмо. Тело письма - таблица HTML. Это все работает хорошо, за исключением того, как таблица структурирована в электронном письме. Из-за длины ссылки в последней строке второй столбец перемещается, а затем между текстом и возвращаемым значением появляется большой пробел. Есть ли способ изменить структуру таблицы, чтобы столбец 2 оставался рядом со столбцом 1? Может быть, есть опция выравнивания или что-то, что позволяет переполнить ссылку? Вот таблица HTML.

   

function form1Submit(e) {
      if(e.values && e.values[1] && e.values[2]) {
        var html='<table>';
        html+=Utilities.formatString('<tr><td>%s</td><td><strong>%s</strong></td><td>%s</td></tr>','&nbsp;','Safety Findings Comment:',e.values[7]);
        html+=Utilities.formatString('<tr><td>%s</td><td colspan ="2">%s</td><td>%s</td></tr>','&nbsp;','https://docs.google.com/spreadsheets/d/e/2PACX-1vQj3j6QgrCyvULYo1IeE3q9L9Gzvz2tVvNI8650nhl-L0cQwyx93tRIeuXPxxxxxxxxxxxxxxxxxxx/pubhtml#','&nbsp;' );
        html+='</table>';
    Logger.log(html);
    GmailApp.sendEmail(getGlobal('form1Email'), getGlobal('form1Subject'), '', {htmlBody:html});
  }
}

Вот обновленный скрипт, который работал. Я использовал как форматирование таблицы, так и форматирование двух столбцов.

function form1Submit(e) {
  if(e.values && e.values[1] && e.values[2]) {
    var url='https://docs.google.com/spreadsheets/d/e/2PACX-1vQj3j6QgrCyvULYo1IeE3q9L9Gzvz2tVvNI8650nhl-L0cQwyx93tRIeuXPxxxxxxxxxxxxxxxxxxx/pubhtml#';
    var html='<style>td,th{padding:overflow-wrap: break-word;}table{table-layout:fixed;width:100%;}</style><table>';
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;" colspan ="2"><font size="4" color="red"><b>%s</b></font></td><td style="width:65%;">%s</td></tr>','&nbsp;','**** DO NOT REPLY TO THIS EMAIL ****','&nbsp;' );
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;','&nbsp;','&nbsp;' );//empty line
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;','&nbsp;','&nbsp;' );//empty line
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;" colspan ="2">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;','Please review findings','&nbsp;' );
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;" colspan ="2"><font size="5"><b>%s</b></font></td><td style="width:65%;">%s</td></tr>','&nbsp;','VISUAL WELDING AUDIT','&nbsp;' );
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Date and Time of Audit:',e.values[0]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Auditor:',e.values[1]); 
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Line/Location Audited:',e.values[2]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Area Responsible:',e.values[3]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;',RoGpf(e.values[4]),RoG(e.values[4]));
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Person Notified:',e.values[9]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Disposition:',e.values[5]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Discontinuity Found:',e.values[6]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Safety Findings Comment:',e.values[7]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Additonal Comments:',e.values[8]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;','&nbsp;','&nbsp;' );//empty line
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;','&nbsp;','&nbsp;' );//empty line
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;" colspan ="2">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;','Link to Dashboard:','&nbsp;' );
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;" colspan ="2">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;',url,'&nbsp;' );
    html+='</table>';
Logger.log(html);
GmailApp.sendEmail(getGlobal('form1Email'), getGlobal('form1Subject'), '', {htmlBody:html});
  }
}

Спасибо!

Answer 1

Я готовлюсь ответить на ваш вопрос, но вот ваш код:

function form1Submit(e) {
      if(e.values && e.values[1] && e.values[2]) {
        var html='<table>';
        html+=Utilities.formatString('<tr><td>%s</td><td><strong>%s</strong></td><td>%s</td></tr>','&nbsp;','Safety Findings Comment:',e.values[7]);
        html+=Utilities.formatString('<tr><td>%s</td><td colspan ="2">%s</td><td>%s</td></tr>','&nbsp;','https://docs.google.com/spreadsheets/d/e/2PACX-1vQj3j6QgrCyvULYo1IeE3q9L9Gzvz2tVvNI8650nhl-L0cQwyx93tRIeuXPxxxxxxxxxxxxxxxxxxx/pubhtml#','&nbsp;' );
        html+='</table>';
    Logger.log(html);
    GmailApp.sendEmail(getGlobal('form1Email'), getGlobal('form1Subject'), '', {htmlBody:html});
  }
}

И я не знаю, как выглядит e.values, поэтому я не знаю, как проверить ваш код, потому что У меня есть неопределенные переменные. Так что, хотя ваш пример может быть минимальным, он не воспроизводим.

Так что я сделал свой собственный вклад. Я также отображаю результат в диалоговом окне, потому что я не хотел отправлять электронные письма. css находится в строке html. Предположительно, вы можете сделать эту работу по электронной почте.

function form1Submit(e) {
      if(e.values && e.values[1] && e.values[2]) {
        var url='https://docs.google.com/spreadsheets/d/e/2PACX-1vQj3j6QgrCyvULYo1IeE3q9L9Gzvz2tVvNI8650nhl-L0cQwyx93tRIeuXPxxxxxxxxxxxxxxxxxxx/pubhtml#';
        var html='<style>td,th{padding:2px;border:1px solid black;overflow-wrap: break-word;}table{table-layout:fixed;width:100%;}</style><table>';
        html+=Utilities.formatString('<tr><td>&nbsp;</td><td><strong>Safety Findings</strong></td><td>%s</td></tr>',e.values[7]);
        html+=Utilities.formatString('<tr><td>&nbsp;</td><td>%s</td><td>&nbsp;</td></tr>',url);
        html+='</table>';
    Logger.log(html);
    //GmailApp.sendEmail('email', 'Subjecet', '', {htmlBody:html});
    SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html), "Test");    

  }
}

function testAbove() {
  var e={values:['one','two','three','four','five','six','seven','eight','nine']};
  form1Submit(e) 
}

Вот как выглядит диалоговое окно:

Вы можете также сделайте что-то вроде этого:

function form1Submit(e) {
      if(e.values && e.values[1] && e.values[2]) {
        var url='https://docs.google.com/spreadsheets/d/e/2PACX-1vQj3j6QgrCyvULYo1IeE3q9L9Gzvz2tVvNI8650nhl-L0cQwyx93tRIeuXPxxxxxxxxxxxxxxxxxxx/pubhtml#';
        var html='<style>td,th{padding:2px;border:1px solid black;overflow-wrap: break-word;}table{table-layout:fixed;width:100%;}</style><table>';
        html+=Utilities.formatString('<tr><td style="width:10%;">&nbsp;</td><td style="width:60%;"><strong>Safety Findings</strong></td><td style="width:30%;">%s</td></tr>',e.values[7]);
        html+=Utilities.formatString('<tr><td>&nbsp;</td><td>%s</td><td>&nbsp;</td></tr>',url);
        html+='</table>';
    Logger.log(html);
    //GmailApp.sendEmail('email', 'Subjecet', '', {htmlBody:html});
    SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html), "Test");    

  }
}

Это можно настроить, отрегулировав ширину каждого столбца отдельно.