Change color of specific column header

问题

Am I able to change the background color of only one column header in a google visualization table that has multiple columns.

The documentation here shows how to change the entire header row by setting a class name to style in CSS, but unless I'm missing something I don't see how to target a specific column header.

Here is the suggestion for formatting the entire hearder row:

var cssClassNames = {headerRow: 'bigAndBoldClass',
hoverTableRow: 'highlightClass'};

回答1:

Here are a couple options for you...

You can provide your own HTML in the column heading
Modify the table manually when the 'ready' event fires

see following example which does both...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '<div style="background-color: cyan;">Department</div>');
    data.addColumn('number', 'Revenues');
    data.addRows([
      ['Shoes', 10700],
      ['Sports', -15400],
      ['Toys', 12500],
      ['Electronics', -2100],
      ['Food', 22600],
      ['Art', 1100],
      ['Web', 9999]
    ]);

    var container = document.getElementById('table_div');
    var table = new google.visualization.Table(container);
    google.visualization.events.addListener(table, 'ready', function () {
      container.getElementsByTagName('TR')[0].cells[1].style.backgroundColor = 'magenta';
    });

    table.draw(data, {
      allowHtml: true
    });
  },
  packages: ['table']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>

来源：https://stackoverflow.com/questions/37483084/change-color-of-specific-column-header

标签

css

google-apps-script

google-visualization