2

How can I change the css properties of a google visualization table and it's columns? I've read on the dev website how to adjust individual cell and row background, text color, etc., but there is no information on how to adjust column or table boarder, color, padding, etc.

This code is from the google dev website and the example is also found in this post.

CSS Properties:

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

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

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

Table Code:

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

There are no classname properties that refer to the columns or table as a whole. My priority is to eliminate the table boarder on the outside and adjust the column width, making the entire table smaller.

Thanks in advance!

Community
  • 1
  • 1
musclez
  • 113
  • 1
  • 14
  • The Table has the class `google-visualization-table-table` that you can style. There are no column elements to style, so you have to set the width of cells in the table. – asgallant Jul 30 '14 at 17:51

1 Answers1

4

i did a google search on 'google-visualization-table-table' and came across this page.

It had multiple examples of table css properties, ie.:

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

thanks for the help asgallant!

Community
  • 1
  • 1
musclez
  • 113
  • 1
  • 14