Question

使用CSS，我试图将5px填充添加到没有将border属性设置为“0”的表中。为此，我可以像这样选择这些表，并通过使它们的背景颜色为红色来测试它：

table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
    background-color: red;
}

此外，这可以使所有表都有填充：

td,th
{
    padding: 5px;
}

但是，我只希望带边框的表有填充，这不起作用：

table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
    padding: 5px;
}

有人在这看到问题吗？提前谢谢。

编辑：我看到我上面发布的代码确实有效，我没有意识到我遗漏了破坏它的代码，但这是我试图开始工作的：

table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
    border: 1px solid rgba(0,0,0,.25);
    border-collapse: collapse;
    padding: 15px;
}

border-collapse:collapse;属性似乎导致了这个问题。有没有办法在单元格和填充之间同时使用单边框？

Answer 1

如果您未在HTML中明确指定一个<table>，<tbody>总是有一个table:not([border="0"]), table:not([border="0"])>tbody>tr, table:not([border="0"])>tbody>tr>td { padding:15px; }。（在XHTML中会有所不同，但这是HTML，而不是XHTML。）

解决方案：还在CSS选择器中指定tbody。

tr

请参阅fiddle

顺便说一句，你可以从规则中删除中间选择器（以border结尾），因为它没有做任何事情。你不能给表格行填充。

你说它确实适用于帖子中的第一个例子，但这并不完全正确。只有第一个选择器工作，整个表格为红色背景，其他两个被忽略，因此单元格保持透明。

哦，最好不再使用{{1}}属性。 WHATWG与W3C之间存在争议，即它是否仍然有效，但他们最终同意它已经过时了。

在非border =“0”的表中填充

1 个答案: