使用CSS

Question

我有两个<tr>元素，颜色边框不同。外观在附图中可见。我怎样才能让它们各自拥有自己的边框，换句话说，下面的蓝色边框也显示出它的上边框？最好用css。

Answer 1

为tr元素添加边框有点问题。您应该将样式定位到里面的td元素。

JSFiddle：https://jsfiddle.net/72pg7xry/

table {
    border-spacing: 0;
}

tr.blue td  {
  border-top: 5px solid blue;
  border-bottom: 5px solid blue;
}

tr.blue td:first-child {
  border-left: 5px solid blue;
}

tr.blue td:last-child {
  border-right: 5px solid blue;
}

tr.green td {
  border-top: 5px solid green;
  border-bottom: 5px solid green;
}

tr.green td:first-child {
  border-left: 5px solid green;
}

tr.green td:last-child {
  border-right: 5px solid green;
}

以下有关为什么样式tr很棘手的更多信息：Add border-bottom to table row <tr>