CODEWITHSUNDEEP
javascriptgoogle-apps-script
nzt
nzt

Reputation: 378

How to use CSS styles with Google Apps table (grid)

I'm a beginner looking for some help styling a table produced by a Google Apps script, it's a table which displays a list of Google Contacts, and started with the code from this site.

I've been trying to style it by adding .setStyleAttributes({}) to app.createGrid, grid.setWidget and app.createLabel but I can't seem to find a way to target the <td> elements on all browsers. The current page looks OK in Chrome but I can't even get border collapse in Firefox...

What I would like is to be able to:

Anyway, here is the code for producing the table, any suggestions or help would be appreciated.

//Create grid to hold the contacts data, styles set <table> inline styles
var grid = app.createGrid(sorted_contacts.length+1,6)
  .setBorderWidth(1)
  .setCellPadding(5)
  .setStyleAttributes({borderCollapse: "collapse", border: "1px solid #D1E2FF", borderBottom: "1px solid #D1E2FF", borderTop: "1px solid #D1E2FF", borderLeft: "1px solid #fff", borderRight: "1px solid #fff"});

//Create the header row
grid.setWidget(0, 0, app.createLabel('Name').setStyleAttributes({fontFamily: "Verdana, sans-serif", fontWeight: "bold", color: "#384C80"}))
    .setWidget(0, 1, app.createLabel('Email').setStyleAttributes({fontFamily: "Verdana, sans-serif", fontWeight: "bold", color: "#384C80"}))
    .setWidget(0, 2, app.createLabel('Home').setStyleAttributes({fontFamily: "Verdana, sans-serif", fontWeight: "bold", color: "#384C80"}))
    .setWidget(0, 3, app.createLabel('Work').setStyleAttributes({fontFamily: "Verdana, sans-serif", fontWeight: "bold", color: "#384C80"}))
    .setWidget(0, 4, app.createLabel('Mobile').setStyleAttributes({fontFamily: "Verdana, sans-serif", fontWeight: "bold", color: "#384C80"}))
    .setWidget(0, 5, app.createLabel('Address').setStyleAttributes({fontFamily: "Verdana, sans-serif", fontWeight: "bold", color: "#384C80"}))

//Write all the contacts in grid/table
for (var i=0; i<sorted_contacts.length; i++){

  //Display the first name + surname or just the surname
  if(sorted_contacts[i][0]!='') grid.setWidget(i+1, 0, app.createLabel(sorted_contacts[i][0]+' '+sorted_contacts[i][1]).setStyleAttributes({fontFamily: "Verdana, sans-serif", color: "#2E2E2E"}));
  else
    grid.setWidget(i+1, 0, app.createLabel(sorted_contacts[i][1]).setStyleAttributes({fontFamily: "Verdana, sans-serif", color: "#2E2E2E"}));

  //Display the rest of the fields
  grid.setWidget(i+1, 1, app.createLabel(sorted_contacts[i][2]).setStyleAttributes({fontFamily: "Verdana, sans-serif", color: "#2E2E2E"}));
  grid.setWidget(i+1, 2, app.createLabel(sorted_contacts[i][3]).setStyleAttributes({fontFamily: "Verdana, sans-serif", color: "#2E2E2E"}));
  grid.setWidget(i+1, 3, app.createLabel(sorted_contacts[i][4]).setStyleAttributes({fontFamily: "Verdana, sans-serif", color: "#2E2E2E"}));
  grid.setWidget(i+1, 4, app.createLabel(sorted_contacts[i][5]).setStyleAttributes({fontFamily: "Verdana, sans-serif", color: "#2E2E2E"}));
  grid.setWidget(i+1, 5, app.createLabel(sorted_contacts[i][6]).setStyleAttributes({fontFamily: "Verdana, sans-serif", color: "#2E2E2E"}));
}

//add the grid/table to the panel
panel.add(grid);

//add the panel to the application
app.add(panel);
return app;

Upvotes: 1

Views: 2180

Answers (1)

Corey G
Corey G

Reputation: 7858

Perhaps you want grid.setRowStyleAttributes(rowNum, styles), or grid.setColumnStyleAttributes(colNum, styles) or the special grid version of setStyleAttributes that targets an individual <td> - grid.setStyleAttributes(rowNum, colNum, styles)

Upvotes: 1

Related Questions