Home/ Questions/Q 8559237
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T15:59:39+00:00

I have a css definition that sets table border-collapse:collapse for a div. In that

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0