Before I delve into answering your query, take a look at the code snippet provided:
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>',' ','Safety Findings Comment:',e.values[7]);
html+=Utilities.formatString('<tr><td>%s</td><td colspan ="2">%s</td><td>%s</td></tr>',' ','https://docs.google.com/spreadsheets/d/e/2PACX-1vQj3j6QgrCyvULYo1IeE3q9L9Gzvz2tVvNI8650nhl-L0cQwyx93tRIeuXPxxxxxxxxxxxxxxxxxxx/pubhtml#',' ' );
html+='</table>';
Logger.log(html);
GmailApp.sendEmail(getGlobal('form1Email'), getGlobal('form1Subject'), '', {htmlBody:html});
}
}
It's important to note that without clarity on what e.values actually contains, it becomes challenging to test out this code due to undefined variables. Therefore, for reproducibility purposes, I've created my own mock input.
To simulate the email feature, instead of sending emails, I display the outcome in a dialog box. The necessary CSS styling is within the HTML string for potential adaptation in an email scenario.
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> </td><td><strong>Safety Findings</strong></td><td>%s</td></tr>',e.values[7]);
html+=Utilities.formatString('<tr><td> </td><td>%s</td><td> </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)
}
Visual representation of the dialog output can be seen below:
https://i.sstatic.net/Jk4rt.jpg
An alternate approach involves setting individual column widths as depicted below:
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%;"> </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> </td><td>%s</td><td> </td></tr>',url);
html+='</table>';
Logger.log(html);
//GmailApp.sendEmail('email', 'Subjecet', '', {htmlBody:html});
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html), "Test");
}
}
https://i.sstatic.net/Pf83H.jpg
You have the flexibility to customize this layout by adjusting the width attributes of each column independently.