HTML，从表格的左上角单元格中删除边框

Question

I have a html table, my top-left cell is empty and I want to remove its border.

I tried with some css:

.border-less {
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
}

That I applied to my top left cell:

<td class="border-less"></td>

but it doesn't work.

Any idea how to achieve this?

Answer 1

Try like this: Demo

table tr.border-less>td {
    border-top: 0px solid #FFFFFF;
    border-left: 0px solid #FFFFFF;
}

Answer 2

Remove border from table and tr and apply border only for td .

 table { border-collapse: collapse; } td { border: 1px solid grey; } td.border-less { border: none; } 

 <table> <tr> <td class="border-less"></td> <td>22</td> <td>33</td> </tr> <tr> <td>11</td> <td>22</td> <td>33</td> </tr> <tr> <td>11</td> <td>22</td> <td>33</td> </tr> </table> 

Answer 3

check out this

CSS

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
.border-less {
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
}

http://jsfiddle.net/vasanthanvas/jfvhxy59/