在单表细胞css的黑边界

Question

只是无法想象如何做单个表格边框黑色。就像它在excel中一样 - 整个表TD边界例如是白色，并且所选单元格具有黑色边框。 显而易见的解决方案是更改最近单元格的边界，但是表格是动态生成的，因此计算当前单元格的邻居需要花费太多精力。虽然，当前的单元格是从“点击”事件中得知的，但是实现它的样式会很棒。 尝试将div放在里面，但如果不指定单元格和div大小完全以像素为单位，则无法对齐它，这是不可移植的。 请帮忙！

抱歉，没有代码就认为这很明显。实际上，我没有一个有效的代码，但目前我正在尝试（只写了一个快速的样本，对不起）： https://jsfiddle.net/a549b6t1/10/

<table>
    <tr>
        <td>
            <div>
                <input type="text">
            </div>
        </td>
        <td>
            <div>
                <input type="text">
            </div>
        </td>
        <td>
            <div>
                <input type="text">
            </div>
        </td>
    </tr>    
    <tr>
        <td>
            <div>
                <input type="text">
            </div>
        </td>
        <td>
            <div>
                <input type="text">
            </div>
        </td>
        <td>
            <div>
                <input type="text">
            </div>
        </td>
    </tr>    
    <tr>
        <td>
            <div>
                <input type="text">
            </div>
        </td>
        <td id="selected">
            <div>
                <input type="text">
            </div>
        </td>
        <td>
            <div>
                <input type="text">
            </div>
        </td>
    </tr>    <tr>
        <td>
                        <div>
                <input type="text">
            </div>

        </td>
        <td>            <div>
                <input type="text">
            </div>

        </td>
        <td>            <div>
                <input type="text">
            </div>

        </td>
    </tr>
    <tr>
        <td>
            <div>
                <input type="text">
            </div>
        </td>
        <td>
            <div>
                <input type="text">
            </div>
        </td>
        <td>
            <div>
                <input type="text">
            </div>
        </td>
    </tr>    
</table>

和css（不知道为什么，这个网站要我在这里粘贴代码）

table
{
    border-collapse: separate;
    border-spacing: 0;
    padding: 0;
    border: 0px solid #ffffff;
    margin: 1em;
}
td
{
    font-size: 1rem;
    empty-cells: show;
    border: 1px solid rgba(230,222,255,1);
    padding: 0;
}
td#selected
{
    font-size: 1rem;
    empty-cells: show;
    border: 1px solid rgba(0,0,0,1);
    padding: 0;
}

tr:nth-child(odd)
{
    padding: 0px;
    margin: 0;
    background: #efedee;
    border: 0px solid transparent;
    overflow: visible;
}
tr:nth-child(even)
{
    padding: 0px;
    margin: 0;
    background: #f6f4f5;
    border: 0px solid transparent;
    overflow: visible;
}
input[type=text]
{
    background: rgba(255,255,255,0);
    border: 0px solid rgba(255,255,255,1);
    margin: 0;
    padding: 5px;
    height: 1rem;
}

希望它有助于理解问题

这就是我想要它的方式 这就是它现在的样子

Shaggy提供的解决方案：https://jsfiddle.net/a549b6t1/14/ 谢谢！

Answer 1

调整相邻的单元格边框仍然会导致问题，例如，在上面的单元格中，您将使左右边框略微切入底部边框，如此代码段所示：

＆＃13;

＆＃13;

div{
    border:10px solid;
    border-color:#000 #f00 #090 #009;
    height:100px;
    width:100px;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

相反，您需要做的是折叠表格的边框，然后对于活动单元格，使用绝对定位的伪元素来创建突出显示的边框，将所有4个定位值设置为边框大小的负像素值。

以下是使用:hover来说明原则的简单示例：

＆＃13;

＆＃13;

*{box-sizing:border-box;}
table{
    border-collapse:collapse;
}
td{
    border:5px solid #ccc;
    background:#eee;
    height:100px;
    position:relative;
    width:100px;
}
td:hover::before{
    border:5px solid #000;
    bottom:-5px;
    content:"";
    left:-5px;
    position:absolute;
    right:-5px;
    top:-5px;
    z-index:1;
}
div{
    position:relative;
    z-index:2;
}
div,input{
    width:100%;
}

＆＃13;

<table>
    <tbody>
        <tr>
            <td><div><input></div></td>
            <td><div><input></div></td>
            <td><div><input></div></td>
        </tr>
        <tr>
            <td><div><input></div></td>
            <td><div><input></div></td>
            <td><div><input></div></td>
        </tr>
        <tr>
            <td><div><input></div></td>
            <td><div><input></div></td>
            <td><div><input></div></td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

作为替代方案，您可以使用border-spacing代替每个单元格的初始边框，而不是：{/ p>

＆＃13;

＆＃13;

*{box-sizing:border-box;}
table{
    background:#ccc;
    border-spacing:5px;
}
td{
    background:#eee;
    height:100px;
    position:relative;
    width:100px;
}
td:hover::before{
    border:5px solid #000;
    bottom:-5px;
    content:"";
    left:-5px;
    position:absolute;
    right:-5px;
    top:-5px;
}
div{
    position:relative;
    z-index:2;
}
div,input{width:100%;}

＆＃13;

<table>
    <tbody>
        <tr>
            <td><div><input></div></td>
            <td><div><input></div></td>
            <td><div><input></div></td>
        </tr>
        <tr>
            <td><div><input></div></td>
            <td><div><input></div></td>
            <td><div><input></div></td>
        </tr>
        <tr>
            <td><div><input></div></td>
            <td><div><input></div></td>
            <td><div><input></div></td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用jquery获取当前单元格，然后将其类更改为定义可见边框的其他类

jquery：

$("#cell").click(function() {
    $(this).toggleClass('not-selected selected');
});

css：

.not-selected{
   border: 0px;
}
.selected{
   border: 1px solid black;
}