如何使用CSS隐藏TABLE中的特定TD边框 [英] How to hide specific TD borders in a TABLE using CSS

问题描述

我想在没有边界的表格中放置一些TD。这是我试过的：

CSS

  .calendar -noBorder {
 border：none; 
背景颜色：红色; 
} 
 
 .calendar-table {
 border-collapse：collapse; 
} 
 
 .calendar-table td {
 border：1px纯黑色; 
 
  

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>一个< / td> 
< td> b< / td> 
< td> c< / td> 
< / tr> 
< tr> 
< td> AAAAAA< / TD> 
< td> b< / td> 
< td> c< / td> 
< td> d< / td> 
< / tr> 
< / table> b 
 
 
 $ b 
 > JsFiddle  
 
 
 
我希望noBorderTD类的TD没有边界，其他边界有边界。我想避免在每个边界的TD上使用class =来指定一个类。
 
 
 
干净的最佳方法是什么？
解决方案
应用样式的顺序错误。正确的顺序是： 
 
 
  .calendar-table td {
 border：1px solid black; 
} 
 
 td.calendar-noBorder {
 border：none; 
背景颜色：红色; 
} 
 
 
 .calendar-table {
 border-collapse：collapse; 
} 
  
说明：首先指定所有td的边界，然后删除特定的td不需要的边框。
 
 
 
看小提琴： https://jsfiddle.net/bwudg7fn/1/ 
 
I want to have some TDs in a table without border. Here is what I've tried:

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

I want the TDs with noBorderTD class to have no border and the others to have borders. I'd like to avoid to specify a class using "class=" on every bordered TDs.

What's the best way to do it clean ?
解决方案
Your order of applying styles was wrong. The correct order is:
.calendar-table td {
    border: 1px solid black;
}

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


.calendar-table {
    border-collapse: collapse;
}
Explanation: First specify the borders for all the td, then remove the specific td borders which are not needed.

See the fiddle: "https://jsfiddle.net/bwudg7fn/1/"

                        
这篇关于如何使用CSS隐藏TABLE中的特定TD边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！