Question

我做这样的事情：

$("#accountsTable")
  .append(getHeadersFromJson(json))
  .append(getRowsFromJson(json));
$("#accountsTable")
  .css("border", "3px solid black");
$("#accountsTable th")
  .css("border-bottom", "3px solid black");
$("#accountsTable td")
  .css("border-bottom", "1px solid black");

看起来不错，只是我注意到最后一行有两个 border-bottom - 一个为 TD 的瘦身，一个想到表。我可以忍受这一点。然而，我的完美主义者有点哭。

是否有一种CSS方法可以删除最后一行样式，而不会在创建过程中实际使用名称，ID，样式等进行归档？

Answer 1

td:last-child { border: none; }

我认为应该这样做。

Answer 2

另一种可能的解决方案是将th边框缩小为2px，然后使用border-top代替每个td。

Answer 3

tr:last-of-type td {
    border: none;
}

或

$("#accountsTable tr:last-of-type td").css({border:"none"});

Answer 4

只需在桌面上设置以下内容：

border-collapse: collapse;

Answer 5

您可以从表格中删除底部边框：

border-bottom: none

或删除最后一行中td的边框：

tr:last-child td{
    border-bottom: none;
}

Answer 6

尝试：not selector

https://developer.mozilla.org/en/docs/Web/CSS/:not

td:not(:last-child) {
 border: 3px solid black;
}

如果您担心浏览器支持，请查看http://selectivizr.com/

如何在没有明确归因的情况下对表中的最后一行进行样式设置？

6 个答案: