Html 使用css制作笔记本效果

我正在尝试使用CSS实现以下效果

我试着在第二位使用一个表和一个空列来实现双线效果，然后使用左边框和右边框。但我得到了如下所示的中断

我使用了

border collapse:collapse

，但是它会删除这个空列，使技巧失败。那么我能做些什么，或者你能建议的任何其他破解方法呢

编辑：这是代码

<table>
                                    <tr><td>Name</td><td class="target"></td><td class="target1">Age</td><td>School</td></tr>
                                    <tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
                                    <tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
                                    <tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
                                    <tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
                                </table>

---

为什么不直接使用双边框样式呢？ 只需将类“first”添加到第一列，并将此样式添加到其中：

.first{
    border-right-style:double;
}

---

编辑：下面是对代码的修改： 我已删除空单元格，并将其添加到您的“目标”代码中：

---

如您所见，您需要放大边界才能看到双线。（因为1个像素无法明显显示2条线）

我试着在第二位使用一个表和一个空列，我们能看到你的代码吗？我会用s设置它们以显示：内联块并添加边框。它：看到代码。很抱歉命名混乱，因为这是一个2分钟的面条：谢谢伙计，我不知道

右边框样式

非常高兴它有帮助：D添加了代码来修复你的演示完成：D

.first{
    border-right-style:double;
}

.target1
{
    border-left: 4px double #F4C8C8;
}