如何使用CSS隐藏TABLE中的特定TD边框

Question

我想在无边框的表格中放置一些TD。以下是我已经试过：

CSS

.calendar-noBorder { 
    border: none; 
    background-color: red; 
} 

.calendar-table { 
    border-collapse: collapse; 
} 

.calendar-table td { 
    border: 1px solid black; 
} 

HTML

<table class="calendar-table"> 
    <tr> 
     <td class="calendar-noBorder">&nbsp;</td> 
     <td> 1 </td> 
     <td> 2 </td> 
     <td> 3 </td> 
    </tr> 
    <tr> 
     <td class="calendar-noBorder">&nbsp;</td> 
     <td> a </td> 
     <td> b </td> 
     <td> c </td> 
    </tr> 
    <tr> 
     <td> aaaaaa</td> 
     <td> b </td> 
     <td> c </td> 
     <td> d </td> 
    </tr> 
</table> 

JsFiddle

我想noBorderTD类的TDS没有边界和其他人有边界。我想避免在每个边界的TD上使用“class =”来指定一个类。

干净的最好方法是什么？

Answer 1

您申请样式的顺序错误。正确的顺序是：

.calendar-table td { 
    border: 1px solid black; 
} 

td.calendar-noBorder { 
    border: none; 
    background-color: red; 
} 


.calendar-table { 
    border-collapse: collapse; 
} 

说明：首先指定所有td的边界，然后删除不需要的特定td边框。

见琴： “https://jsfiddle.net/bwudg7fn/1/”

Answer 2

尝试

.calendar-noBorder { 
    border: none!important; 
    background-color: red; 
} 

https://jsfiddle.net/bwudg7fn/2/

Answer 3

代替：

border:none; 

使用 -

border:0; 

对TD类