Applying CSS to Google Visualization Table

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

<html>
  <head>
      <script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
         var cssClassNames = {
    'headerRow': 'headerRow',
    'tableRow': 'tableRow'};
var options = {'allowHtml': true, 'cssClassNames': cssClassNames, 'alternatingRowStyle': true};
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Username');
        data.addColumn('number', 'Won');
        data.addColumn('number', 'Lost');
        data.addColumn('number', 'Win/Loss Ratio');
        data.addColumn('number', 'Goals For');
        data.addColumn('number', 'Goals Against');
        data.addColumn('number', 'Score');
        data.addRows([
          ['Mike', 22, 13, 0.63, 65, 30, 600],
          ['Andy', 25, 10, 0.71, 60, 18, 630],
          ['Steve', 5, 20, 0.20, 10, 50, 475],
          ['Chris', 40, 10, 0.80, 120, 20, 670],
          ['Jake', 15, 15, 0.50, 70, 50, 525],
        ]);
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
      }
    </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
</html>

I wish to be able to change the formatting of the header row and table rows using CSS, I can't figure out how to do this though. I have read through the Configuration Options but being a relative new comer to coding this hasn't helped and need it clearly explained step by step.

Specifically what do I add to the above code to tell the chart to use my custom CSS. And what would I put in my main? CSS stylesheet. Not sure whether it would be (for the header) #headerRow { } or .headerRow { }.

For your information this is being inserted through Wordpress via a custom field if that makes any difference.

If I haven't made myself clear enough in the question, please follow up. Cheers.

UPDATE: @asgallant - still not working when changing to headerCell and tableCell.

My current code is: HTML/Javascript:

<html>
  <head>
      <script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
         var cssClassNames = {
    headerCell: 'headerCell',
    tableCell: 'tableCell'};
var options = {'allowHtml': true, 'cssClassNames': cssClassNames, 'alternatingRowStyle': true};
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Username',{style: 'background-color:red;'});
        data.addColumn('number', 'Won');
        data.addColumn('number', 'Lost');
        data.addColumn('number', 'Win/Loss Ratio');
        data.addColumn('number', 'Goals For');
        data.addColumn('number', 'Goals Against');
        data.addColumn('number', 'Score');
        data.addRows([
          ['Mike', 22, 13, 0.63, 65, 30, 600],
          ['Andy', 25, 10, 0.71, 60, 18, 630],
          ['Steve', 5, 20, 0.20, 10, 50, 475],
          ['Chris', 40, 10, 0.80, 120, 20, 670],
          ['Jake', 15, 15, 0.50, 70, 50, 525],
        ]);
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
      }
    </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
</html>

CSS:

#table_div table {
    color: #000;
    margin-top: 10px;
}

.headerRow {
    color: #000;
}

The table_div allows me to edit the table as a whole, so the current CSS code has an effect but when I add background-color: #ff0000; for example, it has no effect. Same with .headerRow . The background is being taken from https://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css and doesn't want to be overrode.

Any idea why this could be?

If absolutely necessary I'd be happy to disable the Google CSS entirely and do it purely off my own CSS sheet.

回答1:

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.

回答2:

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

回答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.

回答4:

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.