Clever Geek Handbook

Resize Google Spreadsheet Row

I have a google visualization panel with a spreadsheet (as in https://developers.google.com/chart/interactive/docs/gallery/table ) displaying some data shown below. I was able to change the font size in the table using CSS Class names, but the line height is still the default size - which id would like to change and make it smaller.

What I used for the font is CSS :

    .small-font {
    font-size: 10px;
    }

JavaScript:

    var cssClassNames = {
    tableCell: 'small-font'
    };

Is there a way to do this with CSS or some other method?

Table Chart Image

+3


source to share


2 answers


just add height

to the css class small-font

...

.small-font {
  font-size: 8px;
  height: 10px;
}

be sure to enable this chart option ...

allowHtml: true


see next working snippet ...

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

function drawChart() {
  var data = new google.visualization.arrayToDataTable([
    ['Year', 'Value'],
    ['2010', 10],
    ['2020', 14],
    ['2030', 16],
    ['2040', 22],
    ['2050', 28]
  ]);

  var options = {
    allowHtml: true,
    cssClassNames: {
      tableCell: 'small-font'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Table(container);
  chart.draw(data, options);
}
      

        
        
        
      

    
.small-font {
  font-size: 8px;
  height: 10px;
}
      

        
        
        
      

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


0


source


The problem is unclear with the above details. However, please try below:



  • remove height 'td' or 'tr' if used
  • remove the change of cells, if any
  • use border-collapse: collapse; for table
0


source






More articles:


All Articles