在Google图表表格中为单元格添加填充或边距

Question

我正在使用 Google 图表的表格模式，并且我希望表格中的内容（文本）与边框有一定的距离。我尝试使用 css，但是 padding、margin 和它们的变体都不起作用。与 tableCell 属性相关联的 css（它是 google chart 表格的 cssClassNames 属性的一部分）有效，因为可以设置边框和背景颜色。但是当我尝试设置内边距或外边距时，没有任何改变。那么我需要做什么才能在表格中创建边框和内容之间的距离呢？

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

- Cornelis

---

这个功能似乎还不存在（2016年6月）。顺便问一下，在webapps上同样的问题。 - Avatar

Answer 1

我遇到了相同的问题，找不到快速的答案（也没有干净利落的解决方法）。

为了解决这个问题，我使用的方法是让我的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中硬编码的内容。

- Benoit Duffez

Answer 2

我希望这能帮到你。 使用以下代码将数据添加到行中：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);

这里是工作样例。

如需更多与Google图表相关的查询，请访问jqfaq.com。

- Abinaya Selvaraju

---

“working example”看起来并没有“工作”。我看不到填充。 - vsync

Answer 3

更详细地说明您使用的CSS将有助于回答这个问题。话虽如此，我敢打赌这与您的CSS选择器特异性有关。

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

但是，像这样的东西可能有效：

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

请参阅此链接以获取有关CSS特异性的更多信息。另外，请确保您的表格不在iframe中，在其中声明包含它的页面中的CSS；我之前在调查此问题时曾遇到过这个问题（仅因为我一开始没有意识到它存在）。

- vee