如何更改单个表格行的边框颜色? [英] How do I change border color of a single table row?

问题描述

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

I'm trying to highlight a table row by changing the border color of that individual row. This is my CSS:

    table { border-collapse: collapse;}

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

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

...这是我的HTML:

...and this is my 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的边框底部颜色.是否有更优雅的解决方案?使用outline属性并不能解决问题.谢谢！

The top border remains green. The only way I could get it work was by changing border-bottom color of the TD elements 1 and 2. Is there a more elegant solution? Using the outline property didn't do the trick. Thanks!

推荐答案

只能删除border-collapse: collapse;，因为它会合并相邻的边界.

Only by removing border-collapse: collapse; because it merges borders that are adjacent.

然后为border-spacing应用一个0值

跨度:MDN

border-spacing CSS属性指定相邻表格单元格的边框之间的距离(仅适用于分隔的边框模型).这等效于表示性HTML中的cellspacing属性，但是可以使用一个可选的第二个值来设置不同的水平和垂直间距.

The border-spacing CSS property specifies the distance between the borders of adjacent table cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

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>

这篇关于如何更改单个表格行的边框颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！