7

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

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

4

3 回答 3

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);

这是工作示例。

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

于 2013-07-08T10:56:28.827 回答
1

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

我用来修复（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 中硬编码的内容。

于 2016-02-03T10:58:59.833 回答
0

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

例如， usingtd { 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；我早些时候在调查这个问题时被这个问题所困扰（仅仅是因为我一开始没有意识到它就在那里）。

于 2013-07-05T12:27:12.373 回答