title: Applying CSS to Google Visualization Table
body: <p>I have created a table in Google Visualization which uses the following code: </p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;script type='text/javascript' src='https://www.google.com/jsapi'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
  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});
        }
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id='table_div'&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;​
  </code></pre>
  
  <p>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 <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery/table#Configuration_Options" rel="nofollow noreferrer">Configuration Options</a> but being a relative new comer to coding this hasn't helped and need it clearly explained step by step.</p>
  
  <p>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) <code>#headerRow { }</code> or <code>.headerRow { }</code>.</p>
  
  <p>For your information this is being inserted through Wordpress via a custom field if that makes any difference.</p>
  
  <p>If I haven't made myself clear enough in the question, please follow up. Cheers.</p>
  
  <p>UPDATE:
  @asgallant - still not working when changing to headerCell and tableCell.</p>
  
  <p>My current code is:
  HTML/Javascript:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;script type='text/javascript' src='https://www.google.com/jsapi'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
  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});
        }
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id='table_div'&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#table_div table {
      color: #000;
      margin-top: 10px;
  }
  
  .headerRow {
      color: #000;
  }
  </code></pre>
  
  <p>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 <a href="https://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css" rel="nofollow noreferrer">https://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css</a> and doesn't want to be overrode. </p>
  
  <p>Any idea why this could be?</p>
  
  <p>If absolutely necessary I'd be happy to disable the Google CSS entirely and do it purely off my own CSS sheet.</p>