HTML，移除 table 左上角单元格的边框

Question

我有一个 html table，我左上角的单元格是空的，我想删除它的边框。

我尝试了一些 css:

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

我应用于左上角的单元格：

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

但是没用。

知道如何实现吗？

Answer 1

这样试试：Demo

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

Answer 2

删除 table 和 tr 的边框，仅对 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

看看这个

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/

HTML，移除 table 左上角单元格的边框

HTML, remove border from top-left cell of a table

html

css

html-table

border