I have a HTML table that is very specifally formatted with a custom stylesheet. The idea is to use a jQuery UI dialog in order to display this table when a link is clicked.
I have accomplished this, however, when the table is displayed in the dialog jQuery UI’s stylesheet overrides my custom stylesheet for the table (this is the normal functionality). Essentially I would like to use the dialog as a “container” that holds the custom table. I have not been able to find an apporiate workaround to accomplish this.
Is there a way to display a table – or any other element – within a jQuery UI dialog and keep its original formatting?
You could load your custom table into an iframe….
But a less ugly solution would be to make the priority on your CSS greater than the priority on the JQuery UI CSS. This can be obtained by having more specificness or by overriding it with the !important indicator.
You could also remove the relevant styles from the JQuery UI stylesheets.
If they are inline styles the only thing I have found that works is reassigning the css with javascript or removing the inline styles with javascript after the JQuery UI executes, or modifying JQuery UI itself.