css - 如何本地化 CSS 仅供此表使用？

Question

我添加了一些 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 模板中时出现问题，即表格的单元格不包含预期的内容。我在 Google Chrome 网络浏览器中使用了 Inspect 并确定了问题的根源。这是导致上述 CSS 出现问题的 CSS:

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

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

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

我尝试添加一个“border-collapse:separate”，但它没有做任何事情:

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

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

Answer 1

border-collapse属性只影响表格，不影响单元格，因此您需要在 table 元素上设置它:

#innertable { border-collapse: separate }