CODEWITHSUNDEEP
javascriptcssoverloadinggoogle-visualization
ack__
ack__

Reputation: 923

Google chart - how to change a css property for the whole table

I have a css definition that sets "table border-collapse:collapse" for a div. In that div I display a Google Orgchart that innherits this property and then cause a display problem when rendering the chart.

How can I remove/overload this property for the chart, given that it's generated dynamically hence I can't use inline properties.

EDIT : The code generated by google's js is :

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

I have tried to add in my file :

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

But no effects ..

Still using Chrome's inspect feature, I can see that the following css is causing this :

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

With main-content being my DIV. When I manually uncheck this "border-collapse" property in Chrome, it works fine.

Thanks

Upvotes: 2

Views: 4770

Answers (1)

Todd Moses
Todd Moses

Reputation: 11029

What I have done in similar situations is use Firebug for Firefox to find the name, id, or class of the item that is causing the problem then add css for that element in my stylesheet.

If you do not already have Firebug on the latest version of Firefox, get it here: https://addons.mozilla.org/en-US/firefox/addon/firebug/us

EXAMPLE:

Say the id of the element is googleTable

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

Be Sure to include !important to ensure no inheritance takes place.

Upvotes: 1

Related Questions