Applying CSS to Google Visualization Table

Question

I have created a table in Google Visualization which uses the following code:

Answer 1

Have you tried !important at the end of your CSS property?

Example CSS:

.headerRow {
    color: #000!important;
}

The !important property will always be applied no matter where that rule appears in the CSS.

Answer 2

Once you create the CSS, I found this to be the key to getting it to work:

var cssClasses = {headerRow: 'tblHeaderClass',hoverTableRow: 'tblHighlightClass'};
var options = {showRowNumber: false, allowHTML: true, 'cssClassNames':cssClasses};

table.draw(data,options);

force the directive cssClassNames to string with "ticks" and be sure to use the object you declared to define whe CSS classes to use for the table element names exposed.

Answer 3

I'm also new with Google Charts, but have explored so many of the options that I have a pretty good understanding to how to stylize your table.

See this link for proper Google example: https://developers.google.com/chart/interactive/docs/examples?hl=fr

Ultimately, what you do is assign a class name to the table row. After you can assign any CSS code you want. There is the alternative where you can use inline CSS, but I do not recommend it.

Inline style is as follows

[{v: 'cell string', p: {'style': 'font-weight: bold;'}}],

You can also add your formatting, or anything else.

If you need further clarification, do not hesitate to reply to my thread.

Answer 4

Take a quick peak at https://developers.google.com/chart/interactive/docs/gallery/table for more information, but you should be able to link in your own style sheet in the head tag, then reference the class in JS. The only thing I'm not certain is whether you can create custom CSS files with Wordpress, but this would be the general idea:

HTML:

<link href="css/myCustomCss.css" rel="stylesheet">

Javascript:

var cssClassNames = {headerRow: 'myAwesomeClass'};

CSS:

.myAwesomeClass {
   font-size: 24px;
}