如何更改单个表格行的边框颜色？

Question

我试图通过更改单个行的边框颜色来突出显示表格行。这是我的 CSS：

    table { border-collapse: collapse;}

    td { min-width: 100px; border: 1px solid green; }

    .highlight td { border: 1px solid orange; }

...这是我的 HTML：

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr class="highlight">
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

结果是这样的：

顶部边框保持绿色。我可以让它工作的唯一方法是更改​​ TD 元素 1 和 2 的边框底部颜色。有没有更优雅的解决方案？使用大纲属性并没有解决问题。谢谢！

Answer 1

只能通过删除，border-collapse: collapse;因为它合并了相邻的边框。

然后应用一个0值border-spacing

边框间距：MDN

border-spacing CSS 属性指定相邻表格单元格边框之间的距离（仅适用于分离边框模型）。这相当于展示性 HTML 中的 cellspacing 属性，但可选的第二个值可用于设置不同的水平和垂直间距。

table {
  /*border-collapse: collapse;*/
  border-spacing:0;
  font-size:32px;
}

td {
  min-width: 100px;
  border: 3px solid green;
}

.highlight td {
  border-color: orange;
}
/* optional enhancment to narrow vertical joined borders*/
td + td {
  border-left:0;
}

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr class="highlight">
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
  </table>