How to localize the CSS just for this table's use? - css

Question

I have some CSS added to support a table that looks like this:
#outertable {
background-color: #000000 !important;
border: 40px black solid !important;
}
#innertable {
background-color: #000000 !important;
border: 20px #A67100 solid !important;
}
#innertable td {
background-color:#F1F1D4 !important;
border: 2px #A67100 solid !important;
}
When I use the above CSS in a stand-alone HTML page, it works fine. There is no other CSS, so there are no conflicts. However, when I incorporated the above CSS into a Joomla template there is a problem, that Table's cell doesn't include what is expected. I used Inspect in Google Chrome web browser and identified the source of the problem. Here is the CSS that's causing the problem to the above CSS:
table, table td {
border-collapse: collapse;
}
While in Inspect in Chrome I can uncheck the box for this CSS code and the page looks like expected. The CSS for this is coming from com_content.css. But I don't want to override this CSS for the entire website, just for the table it's being used in on this specific Joomla web page of the site.
How can I incorporate the above CSS into the CSS at the top of this posting so it has the same effect that unchecking it does in Chrome's Inspect, but only on this table on this web page of Joomla?
I have tried adding a 'border-collapse:separate', but it doesn't do anything:
#innertable td {
background-color:#F1F1D4 !important;
border: 2px #A67100 solid !important;
border-collapse:separate !important;
}
I'm not a CSS expert by any means, so I would greatly appreciate help on this. Thanks!

Answer 1

The border-collapse property affects tables only, not cells, so you need to set it on the table element:
#innertable { border-collapse: separate }

Answer 2

You should also consider using selectors and named HTML elements so that you can apply styles on a per element basis