无法更改 Google 可视化 table 的边框

Question

我尝试将 cssClassNames 用于 google 可视化 table 图表。字体，背景改变了。但我不知道隐藏或更改 table 边框。在下面的 google 的 link 上，分配了边框粗细和颜色，但没有更改。

Google的教程：https://developers.google.com/chart/interactive/docs/examples?hl=fr

Answer 1

您可以通过 tableCell 自定义 table 边框，如下所示

例子

google.load('visualization', '1', {packages: ['table', 'gauge', 'corechart']});
google.setOnLoadCallback(drawTable);

function drawTable() {
  var cssClassNames = {
    'headerRow': '',
    'tableRow': '',
    'oddTableRow': '',
    'selectedTableRow': '',
    'hoverTableRow': '',
    'headerCell': '',
    'tableCell': 'custom-table-td',
    'rowNumberCell': ''};

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

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time');
  data.addRows(5);
  data.setCell(0, 0, 'John');
  data.setCell(0, 1, 10000, ',000');
  data.setCell(0, 2, true);
  data.setCell(1, 0, 'Mary');
  data.setCell(1, 1, 25000, ',000');
  data.setCell(1, 2, true);
  data.setCell(2, 0, 'Steve');
  data.setCell(2, 1, 8000, ',000');
  data.setCell(2, 2, false);
  data.setCell(3, 0, 'Ellen');
  data.setCell(3, 1, 20000, ',000');
  data.setCell(3, 2, true);
  data.setCell(4, 0, 'Mike');
  data.setCell(4, 1, 12000, ',000');
  data.setCell(4, 2, false);
  var container = document.getElementById('table');
  var table = new google.visualization.Table(container);
  table.draw(data, options);
  
}

.google-visualization-table-table td.custom-table-td {
    border: solid green;
    border-width: 2px 2px 1px 1px;
}

<script src="http://www.google.com/jsapi"></script>
<div id="table"></div>

无法更改 Google 可视化 table 的边框

Can't change border for Google visualization table

border

google-visualization