如何隐藏在一个表中使用CSS特定TD边界(How to hide specific TD borde

我想在一个表中的某些阵无边框。 以下是我已经试过：

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没有边界和别人有边框。 我想，以避免使用每个镶上TDS“类=”来指定一个类。

什么是做清洁的最佳方式？

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:

代替：

border:none;

采用 -

border:0;

对TD类

Answer 3:

尝试

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

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

文章来源: How to hide specific TD borders in a TABLE using CSS