javascript - 谷歌图表 - 如何更改整个表格的 CSS 属性

Question

我有一个为 div 设置“表格边框折叠：折叠”的 CSS 定义。在那个 div 中，我显示了一个继承此属性的 Google Orgchart，然后在呈现图表时导致显示问题。

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

编辑：谷歌的 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”属性时，它工作正常。

谢谢

score 1 · Accepted Answer

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

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

例子：

假设元素的 id 是 googleTable

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

一定要包括 !important 以确保不会发生继承。

1 回答 1