调整谷歌表格图表行高答案

【问题标题】：Resize google table chart row height调整谷歌表格图表行高
【发布时间】：2017-05-12 03:25:29
【问题描述】：

我有一个带有表格图表（如https://developers.google.com/chart/interactive/docs/gallery/table）的谷歌可视化仪表板，显示如下所示的一些数据。我已经设法使用 CSS 类名称更改表格的字体大小，但行高仍然是默认大小 - 我想更改并使其更小。

我使用的字体 - CSS：

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

javascript：

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

有没有办法使用 CSS 或其他方法来做到这一点？

【问题讨论】：

标签： javascript html css charts google-visualization

【解决方案1】：

只需将 height 添加到 css 类 small-font...

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

请务必包含此图表选项...

allowHtml: true

请参阅以下工作 sn-p...

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>

【讨论】：

绝对有效的解决方案。一开始我的原始代码不能工作，不知道为什么，但在重写后工作。

【解决方案2】：

上述细节并不清楚问题。但是，请尝试以下操作：

删除“td”或“tr”的高度（如果使用）
删除单元格填充（如果有）
使用边框折叠：折叠；餐桌用

【讨论】：