Javascript 如何将CSS样式与Google应用程序表（网格）一起使用

我是一个初学者，正在寻找一些帮助来设计一个由谷歌应用程序脚本生成的表格，它是一个显示谷歌联系人列表的表格，并从中的代码开始

我一直试图通过将

.setStyleAttributes（{}）

添加到

app.createGrid

、

grid.setWidget

和

app.createLabel

中来设置它的样式，但我似乎找不到在所有浏览器上都以

元素为目标的方法。当前页面在Chrome中看起来不错，但我甚至无法在Firefox中实现边框折叠

我希望能够：

• Firefox上的边框正在塌陷（现在完成，谢谢）
• 设置单元格边框的样式，以获得水平的蓝色线条，而无垂直线（或白色垂直线）

无论如何，这是生成表格的代码，任何建议或帮助都将不胜感激

//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;

//创建网格以保存联系人数据、样式集和内联样式
var grid=app.createGrid（已排序的触点长度+1,6）
.宽度（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”）；
//创建标题行
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}））
//在网格/表格中写入所有联系人
对于（var i=0；i也许您想要
grid.setRowStyleAttributes（rowNum，styles）
，或者
grid.setColumnStyleAttributes（colNum，styles）
或者针对单个
-
grid.setStyleAttributes（rowNum，colNum，styles）的特殊网格版本的setStyleAttributes
也许您想要
grid.setRowStyleAttributes（rowNum，styles）
，或者
grid.setColumnStyleAttributes（colNum，styles）
或者针对单个
-
grid.setStyleAttributes（rowNum，colNum，styles）
尝试使用setCellSpacing（0）此外，为了可读性和易于修改，将
{fontfamine:“Verdana，sans serif”，fontweaght:“bold”，color:“#384C80”}
替换为
styleGridHeader
，然后在其上方定义
var styleGridHeader={fontfamine:“Verdana，sans serif”，fontweaght:“bold”，color:“#384C80”}
。谢谢Phil，这两个建议都非常有用。我通过使用样式变量整理了代码，并添加了setCellSpacing使Firefox上的边框塌陷。剩下的就是FF和IE上的单元格边框颜色。在Chrome上，垂直线是白色的，所以看起来像水平蓝线，但在FF&IE上我可以n仅为最外面的线条上色，内部都是黑色的。你能提供一个例子吗？给你：尝试在网格上设置CellSpacing（0）。另外，为了可读性和易于修改，请替换
{fontFamily:“Verdana，sans serif”，fontWeight:“bold”，颜色：“#384C80”}
使用
styleGridHeader
并在其上方定义
var styleGridHeader={fontFamily:“Verdana，sans serif”，fontWeight:“bold”，color:#384C80”}
。谢谢Phil，这两个建议都非常有用。我通过使用样式变量整理了代码，并添加了setCellSpacing使Firefox上的边框塌陷。剩下的就是FF和IE上的单元格边框颜色。在Chrome上，垂直线是白色的，所以看起来像水平蓝线，但在FF&IE上我可以n只给最外面的线条上色，内部都是黑色的。你能举个例子吗？我给了
设置ColumnStyleAttributes
如下尝试：
//设置列样式
var myColumnStyles={border:“1px solid#D1E2FF”，borderBottom:“1px solid#D1E2FF”，borderTop:“1px solid#D1E2FF”，borderLeft:“1px solid#fff”，borderRight:“1px solid#fff”}；
for（i=0；i）和grid.setStyleAttributes就像你说的那样以个人为目标。非常感谢你的帮助！我尝试了
setColumnStyleAttributes
如下：
/Set column style
var myColumnStyles={border:“1px solid”\D1E2FF，borderBottom:“1px solid#D1E2FF”，borderTop:“1px solid#D1E2FF”，borderLeft:“1px solid#fff”，borderRight:“1px solid#fff”}；
for（i=0；i）和grid.setStyleAttributes就像你说的那样针对个人。非常感谢你的帮助！