如何本地化此表的CSS'；有什么用？

我添加了一些CSS以支持如下表：

#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;
}

当我在独立的HTML页面中使用上述CSS时，效果很好。没有其他CSS，因此没有冲突。然而，当我将上述CSS合并到Joomla模板中时，出现了一个问题，该表的单元格不包含预期的内容。我在谷歌Chrome浏览器中使用了Inspect，并确定了问题的根源。以下是导致上述CSS出现问题的CSS：

table, table td {
    border-collapse: collapse;
}

当在Chrome中检查时，我可以取消选中这个CSS代码框，页面看起来就像预期的那样。这方面的CSS来自com_content.CSS。但我不想覆盖整个网站的CSS，只想覆盖该网站特定Joomla网页上使用的表格

我怎样才能将上面的CSS合并到这篇文章顶部的CSS中，使其具有与在Chrome的Inspect中取消选中相同的效果，但只在Joomla网页的这个表上

我尝试添加“边界折叠：分离”，但它没有任何作用：

#innertable td {
    background-color:#F1F1D4 !important;
    border: 2px #A67100 solid !important;
    border-collapse:separate !important;
}

我无论如何都不是CSS专家，所以我非常感谢您在这方面的帮助。谢谢

该属性仅影响表格，不影响单元格，因此需要在

表格

元素上设置它：

#innertable { border-collapse: separate }

---

您还应该考虑使用选择器和命名HTML元素，以便可以在每个元素的基础上应用样式：

<代码>可嵌套的、可嵌套的Td{{/<代码>！很难在没有HTML标记的情况下明确地说出。