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

【问题标题】：Google chart - how to change a css property for the whole table谷歌图表 - 如何更改整个表格的 CSS 属性
【发布时间】：2023-03-03 22:00:04
【问题描述】：

我有一个为 div 设置“表格边框折叠：折叠”的 CSS 定义。在那个 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”属性时，它工作正常。

谢谢

【问题讨论】：

如果您只是查看 Google 的文档。您将看到可以使用 cssClassNames 选项添加类：developers.google.com/chart/interactive/docs/gallery/…
看来cssClassNames选项只适用于表格元素，不适用于表格本身。
所有这些选项让您的餐桌。要编辑google-visualization-table-table，只需在你的css文件中添加.google-visualization-table-table并优先使用!important
好吧，我忘记了“！important”指令。我认为它没有必要，因为它是在页面本身中定义的，但动态内容似乎具有更高的优先级。谢谢你们。
那么为什么我让它工作？ jsfiddle.net/6bWnW

【解决方案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;
}

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

【讨论】：

嗨！我尝试过这种方式（我编辑了我的帖子以显示一些细节）但没有成功。我的代码有什么问题吗？我想知道问题是否可能是当我为“google-visualization-orgchart-table”加载自定义 css 时，Google JS 尚未加载到页面中..
添加 !important 并确保将 .google 表的宽度设置为继承 100% 之前的宽度。