Google Charts. Custom HTML & CSS in table

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="script.js"></script>
  </head>
      
  <body>
    <h1>Google Charts. Custom HTML & CSS in table</h1>
    <div id="table"></div>
  </body>
</html>

// Load the Visualization API and the controls package.
google.load('visualization', '1.0', { packages: ['table'] });

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);

// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
  // Create our data table.
  var data = google.visualization.arrayToDataTable([
    ['Sex', 'Name', 'Donuts eaten', 'Html'],
    ['Male', 'Michael', 5, '<input type="checkbox" id="1" name="check">'],
    ['Female', 'Elisa', 7, '<input type="checkbox" id="2" name="check">'],
    ['Male', 'Robert', 3, '<input type="checkbox" id="3" name="check">'],
    ['Male', 'John', 2, '<input type="checkbox" id="4" name="check">'],
    ['Female', 'Jessica', 6, '<input type="checkbox" id="5" name="check">'],
    ['Male', 'Aaron', 1, '<input type="checkbox" id="6" name="check">'],
    ['Male', 'Michael', 5, '<input type="checkbox" id="1" name="check">'],
    ['Female', 'Elisa', 7, '<input type="checkbox" id="2" name="check">'],
    ['Male', 'Robert', 3, '<input type="checkbox" id="3" name="check">'],
    ['Male', 'John', 2, '<input type="checkbox" id="4" name="check">'],
    ['Female', 'Jessica', 6, '<input type="checkbox" id="5" name="check">'],
    ['Male', 'Aaron', 1, '<input type="checkbox" id="6" name="check">'],
    ['Male', 'Michael', 5, '<input type="checkbox" id="1" name="check">'],
    ['Female', 'Elisa', 7, '<input type="checkbox" id="2" name="check">'],
    ['Male', 'Robert', 3, '<input type="checkbox" id="3" name="check">'],
    ['Male', 'John', 2, '<input type="checkbox" id="4" name="check">'],
    ['Female', 'Jessica', 6, '<input type="checkbox" id="5" name="check">'],
    ['Male', 'Aaron', 1, '<input type="checkbox" id="6" name="check">'],
    ['Male', 'Michael', 5, '<input type="checkbox" id="1" name="check">'],
    ['Female', 'Elisa', 7, '<input type="checkbox" id="2" name="check">'],
    ['Male', 'Robert', 3, '<input type="checkbox" id="3" name="check">'],
    ['Male', 'John', 2, '<input type="checkbox" id="4" name="check">'],
    ['Female', 'Jessica', 6, '<input type="checkbox" id="5" name="check">'],
    ['Male', 'Aaron', 1, '<input type="checkbox" id="6" name="check">'],
    ['Male', 'Michael', 5, '<input type="checkbox" id="1" name="check">'],
    ['Female', 'Elisa', 7, '<input type="checkbox" id="2" name="check">'],
    ['Male', 'Robert', 3, '<input type="checkbox" id="3" name="check">'],
    ['Male', 'John', 2, '<input type="checkbox" id="4" name="check">'],
    ['Female', 'Jessica', 6, '<input type="checkbox" id="5" name="check">'],
    ['Male', 'Aaron', 1, '<input type="checkbox" id="6" name="check">'],
    ['Female', 'Margareth', 8, '<input type="checkbox" id="7" name="check">'],
  ]);
  var table = new google.visualization.Table(document.getElementById('table'));
  
     
  var options = 
  {
    allowHtml: true, 
    showRowNumber: true, 
    width: '100%', 
    height: '300px'
    ,
    cssClassNames: { 
      headerRow: 'headerRow',
      tableRow: 'tableRow',
      oddTableRow: 'oddTableRow',
      selectedTableRow: 'selectedTableRow',
      // hoverTableRow: 'hoverTableRow',
      headerCell: 'headerCell',
      tableCell: 'tableCell',
      rowNumberCell: 'rowNumberCell'
    }    

  };



  table.draw(data, options);
}

body
{
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


/* Tables */
.headerRow, .headerCell {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: rgb(83, 133, 180);
  border-color: rgb(151, 150, 168) !important;
  color: white;
}


.oddTableRow {
    background-color:rgb(232, 246, 247);
}

.tableRow { background-color:rgb(246, 253, 253); } 

tr:hover {background-color: rgba(233, 235, 154, 0.76) !important;}
.selectedTableRow {
    background-color: rgba(141, 186, 238, 0.76) !important;
}