使用CSS制作笔记本效果

Question

我正在尝试使用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>

css

table td
{
    padding: 14px;
    padding-left: 3px; 
    font-size: 20px;
        border-bottom: 1px solid #F4C8C8;
}
.target
{
    border-right: 1px solid #F4C8C8;
}
.target1
{
    border-left: 1px solid #F4C8C8;
}
table tr td
{

}
table
{
    /*border-collapse: collapse;*/
}

Answer 1

为什么不使用边框式双？ 只需在第一列中添加“first”类，然后将其添加到其中：

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

http://jsfiddle.net/KEw9W/

---

编辑：这是你的代码的小提琴：http://jsfiddle.net/hC78S/3/ 我删除了空单元格并将其添加到“目标”代码中：

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

如您所见，您需要放大边框才能看到双线。 （因为1个像素显然不能显示2行）