How to hide specific TD borders in a TABLE using CSS

Question

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 ?

Answer 1

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/"