Google图表 - 如何更改整个表的css属性

Question

我有一个css定义，为div设置“table border-collapse：collapse”。在该div中，我显示了一个谷歌组织结构图，其中包含该属性，然后在渲染图表时导致显示问题。

如果它是动态生成的，我怎么能删除/重载图表的这个属性，因此我不能使用内联属性。

编辑：谷歌的js生成的代码是：

<table class="google-visualization-orgchart-table" dir="ltr" cellpadding="0" cellspacing="0" align="center"`> 

我试图在我的文件中添加：

.google-visualization-orgchart-table {
border-collapse:separate;
}

但没有影响..

仍在使用Chrome的检查功能，我可以看到以下css导致此问题：

#main-content table {
width: 100%;
border-collapse: collapse;
}

主要内容是我的DIV。当我手动取消选中Chrome中的“border-collapse”属性时，它可以正常工作。

谢谢

Answer 1

我在类似情况下所做的是使用Firebug for Firefox查找导致问题的项目的名称，ID或类，然后在样式表中为该元素添加css。

如果您在最新版本的Firefox上还没有Firebug，请在此处获取：https://addons.mozilla.org/en-US/firefox/addon/firebug/us

实施例

说元素的id是googleTable

#googleTable{
 border-collapse:separate !important;
}

确保包含！重要，以确保不会发生继承。