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模板中时，存在一个问题，即Table的单元格不包含预期的内容。我在Google Chrome网络浏览器中使用了Inspect，并确定了问题的根源。以下是导致上述CSS问题的CSS：

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

在Chrome中的Inspect中，我可以取消选中此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 }

Answer 2

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

如何本地化CSS只是为了这个表的使用？

2 个答案: