向 Google 图表表格中的单元格添加填充或边距答案

【问题标题】：Add padding or margin to a cell in Google chart table向 Google 图表表格中的单元格添加填充或边距
【发布时间】：2017-06-27 05:00:56
【问题描述】：

我在表格模式下使用 Google 图表，我希望表格中的内容（文本）与边框有一点距离。我尝试用 css 来做到这一点，但填充、边距和它们的 -left 变体到目前为止还不起作用。链接到 tableCell 属性（它是谷歌图表表的 cssClassNames 属性的一部分）的 css 正在工作，因为我可以设置边框和背景。但是当我尝试设置填充或边距等时，没有任何变化。那么我需要怎么做才能在边框和表格中的内容之间创建一个距离呢？

这是我正在使用的 Google 图表：https://developers.google.com/chart/interactive/docs/gallery/table

【问题讨论】：

此功能似乎尚不存在（2016 年 6 月）。顺便说一句，webapps 上有同样的问题

标签： html css google-visualization

【解决方案1】：

我希望这会对你有所帮助。如下使用data.setCell向行添加数据

data.addColumn('string', 'Name');
            data.addColumn('number', 'Salary');
            data.addColumn('boolean', 'Full Time');
            data.addRows(5);
            data.setCell(0, 0, 'John',null,{'className':'right'});
            data.setCell(0, 1, 10000, '$10,000');
            data.setCell(0, 2, true);

这里是working sample.

更多谷歌图表相关查询请访问jqfaq.com

【讨论】：

“工作示例”似乎不是“工作”。我看不到填充

【解决方案2】：

我偶然发现了同样的问题，但找不到一个快速的答案（也没有一个干净的答案）。

我用来解决（hack？）这个问题的解决方案是让我的 CSS 类比 API 使用的更具体。

之前：

.my-row-class td {
    padding: 15px;
}

之后

.my-row-class td, .google-visualization-table-table .my-row-class td {
    padding: 15px;
}

明确使用.google-visualization-table-table 的选择器比 Google 在其 API 中使用的选择器更具体，因此它最后应用并覆盖 Google 在其 API 中硬编码的内容。

【讨论】：

【解决方案3】：

更详细地了解您正在使用的 CSS 将有助于回答这个问题。也就是说，我愿意打赌这与您的 CSS 选择器特异性有关。

例如，使用td { padding-left: 16px; } 可能不起作用，因为body.docs table th, body.docs table td { padding: 6px 10px; } 的现有CSS 规则会层叠在它之上。

但是，这样的事情可能会起作用：

html body.docs table th,
html body.docs table td 
{
    padding-left: 16px;
}

请参阅this link 了解有关 CSS 特异性的更多信息。另外，请确保您的表格不在 iframe 中，您在包含它的页面中声明 CSS；早些时候我在调查这个问题时被这个问题所困扰（只是因为我一开始没有意识到它的存在）。

【讨论】：