Как скрыть определенные границы TD в ТАБЛИЦЕ, используя CSS

Question

Я хочу, чтобы в таблице были некоторые ТД без границ. Вот что я попробовал:

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

Я хочу, чтобы TD с классом noBorderTD не имели границ, а другие имели границы. Я бы хотел не указывать класс с помощью "class=" на всех граничных TD.

Какой лучший способ сделать это чисто?

Answer 1

Ваш порядок применения стилей был неправильным. Правильный порядок:

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

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


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

Объяснение: Сначала укажите границы для всех тд, а затем удалите конкретные тд границы, которые не нужны.

Смотрите скрипку: " https://jsfiddle.net/bwudg7fn/1/"

Answer 2

Вместо:

border:none;

Используйте -

border:0;

на занятиях ТД

Answer 3

Пытаться

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

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