如何更改Google可视化表及其列的css属性?

时间:2014-07-30 17:09:17

标签: javascript html css google-visualization data-visualization

如何更改Google可视化表及其列的css属性?我在开发网站上看过如何调整单个单元格背景,文字颜色等,但没有关于如何调整列的信息寄宿生,颜色,填充等

此代码来自Google dev website,该示例也位于this post.

CSS属性:

<style>
.orange-background {
   background-color: orange;
  }

 .orchid-background {
  background-color: orchid;
 }

.beige-background {
 background-color: beige;
  }
</style>

表格代码:

var cssClassNames = {
'headerRow': 'italic-darkblue-font large-font bold-font',
'tableRow': '',
'oddTableRow': 'beige-background',
'selectedTableRow': 'orange-background large-font',
'hoverTableRow': '',
'headerCell': 'gold-border',
'tableCell': '',
'rowNumberCell': 'underline-blue-font'};

var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames};

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

//... add data here ...

var table = new google.visualization.Table(container);
table.draw(data, options);

没有类名属性可以引用作为整体。我的首要任务是消除外面的表格边框并调整列宽,使整个表格更小。

提前致谢!

1 个答案:

答案 0 :(得分:4)

我在&#39; google-visualization-table-table&#39;上进行了谷歌搜索。并遇到了这个page

它有多个表css属性的例子,即:

.google-visualization-table-table {
  font-family: arial, helvetica;
  font-size: 10pt;
  cursor: default;
  margin: 0;
  background: white;
  border-spacing: 0;
}

感谢您的帮助asgallant