表格单元格中的边框颜色变化答案

【问题标题】：border-color change in table cells表格单元格中的边框颜色变化
【发布时间】：2018-02-12 19:43:15
【问题描述】：

我有一个非常简单的 HTML 表格，如下所示：

<table>
 <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr><!-- Table Row -->
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

我希望当我将鼠标悬停在每个单元格上时，单元格的边框可能会改变颜色。于是我写了如下CSS试图达到效果：

table{
position: absolute;

font-family:Arial, Helvetica, sans-serif;
color:white;
font-size:12px;
border:white 1px solid;

-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;

-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;

width: 100%;
height: 100%%;
}

table tr {
text-align: center;
padding-left:20px;
}

table td {
padding:18px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
width: 33%;
height: 50%;
background-color: black;
}

table td:hover{
  border:blue 1px solid;
}

此代码有效，但并不完美。当我将鼠标悬停在单元格 1、2、3（如 html 中编号）上时效果很好，但是当我悬停在单元格 4 5 6 上时，单元格的 上边框 是不显示蓝色。我认为它们的顶部边框被上面单元格的底部边框覆盖。

这个问题有解决办法吗？

【问题讨论】：

你没有提供完整的css
奇怪！对我来说工作得很好。 jsfiddle.net/RfNHg
我相信asker的桌子上有border-collapse: collapse;在桌子上jsfiddle.net/9URAd
即使使用更新的代码，它似乎也能正常工作。
它工作正常，这段代码没有任何问题。

标签： html css html-table

【解决方案1】：

将border-collapse 设置为折叠时，解决方案是为所有单元格使用嵌入边框，为鼠标悬停的单元格使用实心边框。下面是建议使用的 CSS：http://jsfiddle.net/QmHGG/

以下是应用于表格的 CSS：

table, tr, td {
    border: 1px inset black;
    border-collapse: collapse;
    border-spacing: 0;
}

td:hover {
    border: 1px solid red;
}

【讨论】：