更改数据表的列背景

Question

I am trying to change the background color of only one column called Fund1 to a light orange so it stands out for a datatable which looks like this.

<<script type="text/javascript"src="https://www.gstatic.com/charts/loader.js">      </script>
   <div id="table_div"></div>
  <style>
.google-visualization-table-td {
text-align: center !important;
}




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

    function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', ' ');
    data.addColumn('number', 'Fund1');
    data.addColumn('number', 'Fund2');
    data.addColumn('number', 'Fund3');
    data.addRows([
      ['Sales commission', {v:0, f:'0%'}, {v: 5.75, f: '5.75%'}, {v:6, f:'6%'}],
      ['Service / Trailer Fee', {v:0, f:'0%'}, {v:0,   f: '0%'}, {v:0.5, f:'0.5%'}],
      ['Redemption Fee', {v:0, f:'0%'}, {v: 0, f: '0%'}, {v:8, f:'≤8%'}],
      ['Management Fee', {v:2, f:'2%'}, {v: 2,  f: '2%'}, {v:2.5, f:'2.5%'}],
      ['Minimum Investment', {v:1000, f:'$1,000'}, {v: 2500,  f: '$2,500'}, {v:500, f:'$500'}],
      ['Maturity', {v:1, f:'≤1 year'}, {v: 2,  f: '2 years'}, {v:8, f:'8 years'}]
    ]);


    var table = new google.visualization.Table(document.getElementById('table_div')); 

    table.draw(data, {showRowNumber: false, width: '750%', height: '100%'});

    }

Answer 1

You can add a class to every cell under the Fund1 column using the p property of the cell object, as described here . Then using CSS, you can add a background color to each cell.

 google.charts.load('current', { 'packages': ['table'] }); google.charts.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', ' '); data.addColumn('number', 'Fund1'); data.addColumn('number', 'Fund2'); data.addColumn('number', 'Fund3'); data.addRows([ ['Sales commission', { v: 0, f: '0%', p: { className: 'fund1Cell' } }, { v: 5.75, f: '5.75%' }, { v: 6, f: '6%' }], ['Service / Trailer Fee', { v: 0, f: '0%', p: { className: 'fund1Cell' } }, { v: 0, f: '0%' }, { v: 0.5, f: '0.5%' }], ['Redemption Fee', { v: 0, f: '0%', p: { className: 'fund1Cell' } }, { v: 0, f: '0%' }, { v: 8, f: '≤8%' }], ['Management Fee', { v: 2, f: '2%', p: { className: 'fund1Cell' } }, { v: 2, f: '2%' }, { v: 2.5, f: '2.5%' }], ['Minimum Investment', { v: 1000, f: '$1,000', p: { className: 'fund1Cell' } }, { v: 2500, f: '$2,500' }, { v: 500, f: '$500' }], ['Maturity', { v: 1, f: '≤1 year', p: { className: 'fund1Cell' } }, { v: 2, f: '2 years' }, { v: 8, f: '8 years' }] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, { showRowNumber: false, width: '750%', height: '100%' }); } 

 .google-visualization-table-td { text-align: center !important; } td.fund1Cell { background-color: #ffdd77; } tr[class*="-over"] td.fund1Cell { background-color: #ffbb55; } 

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