[英]How to hide specific TD borders in a TABLE using CSS
我想在没有边框的桌子上放一些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"> </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td class="calendar-noBorder"> </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>
我希望具有noBorderTD类的TD没有边界,而其他具有边界。 我想避免在每个带边框的TD上使用“ class =“指定类。
清洁的最佳方法是什么?
您应用样式的顺序是错误的。 正确的顺序是:
.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/ ”
代替:
border:none;
采用 -
border:0;
在TD班上
尝试
.calendar-noBorder {
border: none!important;
background-color: red;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.