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的边框底部颜色。是否有更优雅的解决方案？使用outline属性并没有做到这一点。谢谢！

Answer 1

仅删除border-collapse: collapse;，因为它会合并相邻的边框。

然后为0

应用border-spacing值

Border-spacing : MDN

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

试试

table { border-collapse: collapse;}
td { min-width: 100px;}
td:first-child{border-right: 1px solid green;}
tr{border: 1px solid green;}
tr.highlight td { border: 1px solid orange; border-top: 1px solid orange; }

你应该给第一个孩子的行和td边框，然后为highlited tr的边框应用不同的颜色。

Answer 3

为了解决此问题，请为display block属性table { width: 100%; border-collapse: collapse; } tr { width: 100%; display: block; } td { min-width: 100px; text-align: center; border: 1px solid green; /* Remove the left border from td to make the border width even on all sides. */ border-left: none; } td:first-child { /* If the td is the first child give it a left border to close the left side of the row. */ border-left: 1px solid green; } .highlight td { /* Since you're changing only the border-color, you only need to redefine the border-color. */ border-color: orange; }。请参阅下面的代码段。

<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>

inline-block

或者，如果您将脚本中tr的宽度设置为100％，则可以对inline-flex属性使用display或/* In the case of the tr with a width of 100% all of the following have the same output for their borders. */ display: inline-block; display: inline-flex; display: block;。

table {
  border-collapse: collapse;
}
td {
  min-width: 100px;
  border: 1px solid green;
}
.highlight td {
  position: relative;
}
.highlight td:before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  bottom: -1px;
  border: 1px solid orange;
}

Answer 4

您可以尝试使用绝对定位的伪元素绘制边框，这将覆盖单元格上设置的边框。

<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>

minifyEnabled

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

4 个答案: