Set the selected row css properties for a Google Visualization Table Chart

Question

I am struggling to understand how the CSS properties are overridden when using the cssClassNames property in Google Visualization API, I think its pretty clear from the documentation here , but somehow I cant make it work.

My ultimate goal here is to set a custom background-color for selected rows. So far my efforts have been to use the cssClassNames to specify a class for the selected row and set it in my CSS for the document. I can see that the font properties work correctly (font-style, text-decoration, etc), but when trying to use the background-color property it just doesnt work!

My js:

  google.charts.load('current', {'packages':['table']});
  google.charts.setOnLoadCallback(drawTable);

  function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
      ['Mike',  {v: 10000, f: '$10,000'}, true],
      ['Jim',   {v:8000,   f: '$8,000'},  false],
      ['Alice', {v: 12500, f: '$12,500'}, true],
      ['Bob',   {v: 7000,  f: '$7,000'},  true]
    ]);
    var cssClassNames = {
       'selectedTableRow': 'selectedTableRow',
       'oddTableRow': 'selectedTableRow'};
            var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames};
    var table = new google.visualization.Table(document.getElementById('table_div'));

    table.draw(data, options);
  }

And the CSS:

.selectedTableRow {
  font-style: italic;
  color: purple;
  font-size:15px;
  text-decoration: underline;
  border: 3px solid gold;
  background-color: beige;
}

https://jsfiddle.net/6e2xw5cd/4/

I also tried the other available classes, but these seem to be able to implement the CSS background properties just fine. On the following JSFiddle you can notice the behaviour when setting oddTableRows the same as selectedTableRows: https://jsfiddle.net/3kecdaz0/

So I am wondering if its possible at all to set background properties for selected rows in the Google Visualization Chart Table element?

Answer 1

I think you should use background-color: beige !important; to override background color.

.selectedTableRow {
    font-style: italic;
    color: purple;
    font-size:15px;
    text-decoration: underline;
    border: 3px solid gold;
    background-color: beige !important;
  }

Fiddle

Or try to include your custom css file after table.css .

Answer 2

In order to override the proeperty value you have to add !important;

Change background-color: beige ; to

background-color: beige !important;