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

Question

我想在 table 中添加一些无边框的 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 class 的 TD 没有边框，而其他的有边框。我想避免在每个带边框的 TD 上使用 "class=" 指定 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边框。

查看 fiddle：“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 类

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

How to hide specific TD borders in a TABLE using CSS

html

css

html-table

borderless