Diseñar tablas de Google Tabla

Question

Estoy tratando de agregar estilo CSS a una tabla de gráficos de Google. He intentado esto:

https://developers.google.com/chart/interactive/docs/gallery/table#customproperties

en la primera celda (Mike), pero no funcionó. Establezco allowHtml como verdadero en la variable de opciones. ¿Cómo puedo cambiar el fondo, el color del texto, etc. de las celdas individuales? Gracias.

<script type="text/javascript"> 
     google.load('visualization', '1', {packages:['table']}); 
     google.setOnLoadCallback(drawTable); 
     function drawTable() { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Employee Name'); 
      data.addColumn('date', 'Start Date'); 
      data.addRows(3); 
      data.setCell(0, 0, 'Mike', {style: 'background-color:red;'}); 
      data.setCell(0, 1, new Date(2008, 1, 28)); 
      data.setCell(1, 0, 'Bob'); 
      data.setCell(1, 1, new Date(2007, 5, 1)); 
      data.setCell(2, 0, 'Alice'); 
      data.setCell(2, 1, new Date(2006, 7, 16)); 

      var options = { 
       allowHtml: true 
      }; 

      // Create a formatter. 
      // This example uses object literal notation to define the options. 
      var formatter = new google.visualization.DateFormat({formatType: 'long'}); 

      // Reformat our data. 
      formatter.format(data, 1); 

      // Draw our data 
      var table = new google.visualization.Table(document.getElementById('dateformat_div')); 
      table.draw(data, options); 
     } 
    </script> 

Answer 1

¿Cómo puedo cambiar el fondo, el color del texto, etc., de las células individuales? Gracias.

Comentario de Per @ Bondye, la respuesta se encuentra en la guía de desarrolladores.

https://developers.google.com/chart/interactive/docs/examples#custom_table_example

definir reglas de estilo que coincidan con sus criterios:

<style> 
.orange-background { 
    background-color: orange; 
    } 

.orchid-background { 
    background-color: orchid; 
} 

.beige-background { 
background-color: beige; 
    } 
</style> 

ellos se aplican a la mesa cuando se dibuja.

var cssClassNames = { 
'headerRow': 'italic-darkblue-font large-font bold-font', 
'tableRow': '', 
'oddTableRow': 'beige-background', 
'selectedTableRow': 'orange-background large-font', 
'hoverTableRow': '', 
'headerCell': 'gold-border', 
'tableCell': '', 
'rowNumberCell': 'underline-blue-font'}; 

var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames}; 

var data = new google.visualization.DataTable(); 

//... add data here ... 

var table = new google.visualization.Table(container); 
table.draw(data, options);