Question

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

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

Answer 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

Answer 2

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

我用来修复的解决方案（黑客？）这是让我的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中硬编码的内容。

Answer 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;
}

有关CSS特异性的更多信息，请参阅this link。另外，请确保您的表不在iframe中，您在其中声明包含它的页面中的CSS;在调查这个问题时我被这个问题所困扰（仅仅是因为我没有意识到它首先出现在那里）。

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

3 个答案: