css表格双边框在最后关闭单元格

Question

我已经创建为具有边框的 css，以便表格看起来像一个 1px 的网格。第一列是双边框。问题是由于双边框，最后一行前 2 个单元格没有关闭。我不能在表格级别使用边框，因为它也关闭了第一行单元格，这不是必需的。第一行单元格上边框设置为白色，这样就没有边框了

我也尝试了 box-layout css 道具，但这个 & border-top on table level 介绍了表格。我知道我可以将它添加到 div 中，以便 div 可以有边框，但我正在寻找解决此问题的最佳方法，包括无论如何都可以使用设置为 table、tr 或 td 级别的属性来解决它。

下面是表格和 CSS，或者可以在这里找到：http://jsfiddle.net/TcQ2j/。

<table class="tblplg sty4">
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                    </tr>
                    <tr>
                        <td>12</td>
                        <td>13</td>
                        <td>24</td>
                        <td>15</td>
                    </tr>
                </tbody>
            </table> 


<style type="text/css">
/*style4*/
.tblplg.sty4  {
    border-collapse:collapse;
    text-align: center;

}

.sty4 td {
         border: 1px solid black;
}

.sty4 td:first-child {
    text-align: left;   
}


.sty4 tr:first-child td{
    border-bottom: double   
}

.sty4 tr:first-child td:first-child{
    border-left: 0px;   
}

.sty4 tr:first-child td{
    border-top: 0px;    
}


.sty4 td:first-child {
         border-right: double;

}

.sty4 tr:last-child td {
         border-bottom: 0px;


}
/*style4*/
</style>

Answer 1

这不是最干净的答案，但它确实有效。看起来它是导致问题的双边框的浏览器解释，所以我将您的表格设置为相对位置，然后使用 :after 伪元素添加位于表格底部的一行。

http://jsfiddle.net/xKuJH/5/