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

Posted 2023-03-05

【中文标题】HTML，从表格的左上角单元格中删除边框

【英文标题】：HTML, remove border from top-left cell of a table

【发布时间】：2015-08-01 06:38:12

【问题描述】：

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

我尝试了一些 css：

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

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

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

但它不起作用。

知道如何实现吗？

【问题讨论】：

包含td 的tr 有边框吗？

可能你的table 已经有边框了。试试tableborder:0;

【参考方案1】：

从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>

【参考方案2】：

看看这个

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/

【参考方案3】：

试试这样：Demo

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