Question

I have created as css to have borders so that the table looks like a grid with 1px. The first column is double border. The issue is the last row first 2 cells are not closed due to double border. I cannot use at table level the border as it closes first row cells as well which is not required. The first row cell top border is set to white so that there is not border

I tried the box-layout css prop as well but this & border-top on table level introduces the table. I know i can add it in div so that div can have borders but am looking the best way to resolve this including it can anyway resolved using property been set either table, tr or td level.

Below is the table & the css or it can be found here: 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

This isn’t the cleanest answer but it certainly works. Looks like its a browser interpretation of a double border that is causing the issue so I set your table to position relative and then used the :after pseudo element to add a a line that sits at the bottom of your table.

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