CSS如何实现细边框TABLE，并且其单元在鼠标悬停时四周边框变色？

Question

html代码

<table id="itemKey">
                <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                </tbody>
            </table>

css代码

#itemKey 
{
    width: 100%;
    border-collapse: collapse;
}
#itemKey td 
{
    height: 40px;
    background-color: #141414;
    border: solid 1px black;
}

#itemKey td:hover
{
    border-color: #656565;
}

因为要让表格内部的边框与外边框一致，设置了border-collapse:collapse; 结果是鼠标悬停时，表格单元的只有部分边框变色。
请问如何才能解决

PS：不知道为什么上面html代码直接给我转换成了表格显示，烦劳各位了。

Answer 1

试试这个

table, td {
    border: 1px inset black;
    border-collapse: collapse;
}
td:hover {
    border: 1px solid red;
}