Javascript 如何向google.visualization.DataTable添加单独的样式而不更改其自己的样式

正如标题中提到的，我的问题是如何在不改变自己的样式的情况下向google.visualization.DataTable添加单独的样式

我添加了一个单独的css类，以使表格标题具有粘性，并为表格标题添加背景色。在我添加了css“

cssClassNames

”类之后，表格自己的样式就变了，例如：默认的行背景色和鼠标悬停时表格行高亮显示

这是我的代码：

var data=new google.visualization.DataTable();

    data.addColumn('string','Name');
    data.addColumn('string','Type');
    data.addColumn('number','meter');
    data.addColumn('string','Event');
    data.addColumn('string','Status');

    data.addRows(Data.length);
    for(i=0;i<Data.length;i++){

        data.setCell(parseInt([i]),0,Data[i]['ID']);
        data.setCell(parseInt([i]),1,Data[i]['Name']);
        data.setCell(parseInt([i]),2,parseInt(Data[i]['Total']));
        data.setCell(parseInt([i]),3,'change');
        data.setCell(parseInt([i]),4,'OK');
        }

    var cssClassNames = {tableRow :"tableRowGoogle",headerCell :"headercellgoogle",rowNumberCell : "rowNumberCell",tableCell  : "rowcellgoogle"};   

    var options=null;
    if(data.getNumberOfRows()>7){
        options = {
                  width : '100%',
                  height:550,
            sort : 'enable',
            sortColumn : 1,
            sortAscending : false,
            scrollLeftStartPosition : 50,
            showRowNumber : true,
            allowHtml :true,
            cssClassNames : cssClassNames   
        };
    }else{
        options = {
            width : '100%',
            sort : 'enable',
            sortColumn : 1,
            sortAscending : false,
            scrollLeftStartPosition : 50,
            showRowNumber : true,
            allowHtml :true,
            cssClassNames : cssClassNames   
        };
    }
    var table = new google.visualization.Table(document.getElementById('SummaryTable'));
    table.draw(data, options);

     google.visualization.events.addListener(table, 'select', function() {
            var row = table.getSelection()[0].row;
            popDevInfo(data.getValue(row, 0));
          });

var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Name'）；
data.addColumn（'string'，'Type'）；
data.addColumn（'number'，'meter'）；
data.addColumn（'string'，'Event'）；
data.addColumn（'string'，'Status'）；
data.addRows（data.length）；
对于（i=0；i7）{
选项={
宽度：“100%”，
身高：550，
排序：“启用”，
sortColumn:1，
排序：错误，
滚动左开始位置：50，
showRowNumber:true，
allowHtml:是的，
cssClassNames:cssClassNames
};
}否则{
选项={
宽度：“100%”，
排序：“启用”，
sortColumn:1，
排序：错误，
滚动左开始位置：50，
showRowNumber:true，
allowHtml:是的，
cssClassNames:cssClassNames
};
}
var table=新的google.visualization.table（document.getElementById（'SummaryTable'）；
表.绘制（数据、选项）；
google.visualization.events.addListener（表'select'，函数（）{
var row=表。getSelection（）[0]。行；
popDevInfo（data.getValue（行，0））；
});

如何在不影响表的默认样式的情况下向表中添加其他样式？

---

如有任何建议，将不胜感激

不要在选项中提供

cssClassNames

，
只需在页面上添加某个位置

表格图表生成普通html表格元素，
因此，您可以将它们设置为任何其他html表的样式

在本例中，绘制了两个表格。
使用以下css，两个图表都将有一个绿色边框

table {
  border: 2px solid lime;
}

以下css仅影响第二个图表--

chart\u div\u 1

#chart_div_1 th {
  color: magenta;
  text-align: left;
}

#chart_div_1 tr {
  outline: thin solid cyan;
}

所以，这只是找到一个选择器来满足您的需要的问题

google.charts.load（'current'{
回调：函数（）{
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”]，
['2004',  1000,      400],
['2005',  1170,      1170],
['2006',  660,       1120],
['2007',  1030,      540],
['2008',  660,       660],
['2009',  1030,      540]
]);
变量选项={
allowHtml:是的，
showRowNumber:true，
排序：错误，
sortColumn:0，
宽度：“100%”
};
新的google.visualization.Table（document.getElementById（'chart\u div\u 0'））.draw（数据，选项）；
新的google.visualization.Table（document.getElementById（'chart\u div\u 1'））.draw（数据，选项）；
},
套餐：[“表”]
});
/*设置所有表格的样式*/
桌子{
边框：2倍固体石灰；
}
/*仅样式表分区1*/
#图1分区{
颜色：洋红色；
文本对齐：左对齐；
}
#图表分区1 tr{
轮廓：薄固体青色；
}



谢谢您的帮助：）