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

Question

我有一个 css 定义，它为一个 div 设置了“table border-collapse:collapse”。在那个 div 中，我显示了一个继承此属性的 Google Orgchart，然后在呈现图表时导致显示问题。

鉴于图表是动态生成的，因此我无法使用内联属性，我该如何删除/重载图表的此属性。

编辑:google 的 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

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

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

示例:

假设元素的id是googleTable

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

确保包含 !important 以确保不会发生继承。