Question

我已创建为css以具有边框，以使该表看起来像1px的网格。第一列是双边框。问题是由于双边界，前两个单元格未关闭的最后一行。我不能在表级使用边框，因为它关闭第一行单元格，这是不需要的。第一行单元格顶部边框设置为白色，因此没有边框

我也试过了盒子布局css道具，但是这个＆amp;表级别的border-top介绍了该表。我知道我可以在div中添加它，以便div可以有边框，但我正在寻找解决此问题的最佳方法，包括无论如何解决使用属性设置为table，tr或td级别。

下面是表＆amp; 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/

css表双边边框关闭单元格

1 个答案: