I have TWO tables but want ONE of them to ignore the Tablecloth CSS

I have a page that has TWO tables on it. One of which is using Tablecloth (http://cssglobe.com/lab/tablecloth/) to style to table. The Tablecloth CSS styles all table elements (<table>,开发者_Go百科 <tbody>, <tr>, <td>, ect.) on the website. Is there a way to tell ONE table on the page to ignore the tablecloth CSS?

From the linked page:

"...there's absolutely no need for hardcoded class names or id's. Tablecloth adds those automatically. However, if you wish, you can apply your own class names without fear of them being run over."

So, it would appear that if you make a table like this, with its own styling declared, it will ignore the tablecloth:

<table class="myOwnTable">
...
</table>

As I mentioned in my comment on bdares' answer, the only way to get Tablecloth to truly ignore a given table is by modifying the plugin's CSS and JS. So I took a shot at it myself. Check out my fork on GitHub: https://github.com/peterjmag/tablecloth.

A couple of caveats:

1. I modified the JS to target any element with the tablecloth class—it's not limited to tables. I'm a bit of a JS newbie, so I'm not sure yet how to combine getElementsByTagName("table") and getElementsByClassName("tablecloth") to target only table elements with that class. In jQuery, it'd be as simple as $("table.tablecloth").

2. Since the modified JS uses getElementsByClassName, it won't work in IE8 and below. I'll see if I can fix that with an IE-compatible implementation of the method (perhaps something like this?).

Long story short: To use this modified version, just add class="tablecloth" to any tables that you want to target. The plugin will ignore the rest.

For the table you want you can use !important rules to make sure those rules aren't overriden by the other style i.e.

   #othertable {background: white !important;}