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

Tags: javascript,css,overloading,google-visualization

Problem :

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 {

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.


Solution :

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:


Say the id of the element is googleTable

 border-collapse:separate !important;

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

    CSS Howto..

    How to override font-size (em) in this condition?

    How to exclude a child from the parent css property?

    CSS: How to position child divs in main div side by side

    How to distribute DIVS evenly (horizontal and vertical) that floats with each other?

    I am having a hard time figuring out how to dynamically setup a timeline

    2nd image appears as mirror image in IE— CSS image FLIP transform- How to fix?

    How make a fixed element be on top of another position fixed element

    How to get the value of last assigned property in Sass or CSS?

    how to overwrite global css to div tag which contains different html tags with different style

    how to vertically align footer contents with css

    How does Matt Haughey's blog insert rosettes in each post title? [closed]

    How to make text box scroll vertical in overflow css html?

    Pure CSS3 show/hide full height div with transition

    How to make a floating box in the center of the screen with responsive layout?

    How to correctly align left in CSS?

    how to solve IE6 box model problem without adding extra div and using Valid CSS?

    How to create fixed sidebar with Skeleton CSS?

    How to prioritize a CSS class?

    How to write CSS to convert div elements into a 3 or 4 column table?

    Liferay: how to avoid rebuilding/redeploying CSS files

    How to put a diagonal line over a textbox in CSS?

    How to draw X Sign with SVG+CSS?

    How to check if a css rule exists

    How to get the type word inside the input field once after pressing the Comma key and not after pressing space bar

    How to make jQuery UI nav menu horizontal?

    how to limit the size of image that gets submitted with a box

    How to preserve margins and expand a div to fit its contents size?

    How to make a function set css width with a JavaScript variable?

    How to make text stay in place regardless of the monitor size?

    How to put bull inside css circle