http://jsbin.com/uzojax/11/edit
<table cellspacing="1" width="50%" bgcolor="#cccccc" width="50%">
<tr class="csstextheader">
<td>
</td>
<td>Class
</td>
<td>Numbers
</td>
</tr>
<tr class="csstablelisttd">
<td> 1
</td>
<td>2
</td>
<td>3
</td>
</tr>
<tr class="csstablelisttd">
<td> 4
</td>
<td class='csstdred' >
</td>
<td> 6
</td>
</tr>
<tr class="csstablelisttd">
<td > 7
</td>
<td class='csstdred'> 8
</td>
<td> 9
</td>
</tr>
<tr class="csstablelisttd">
<td> 10
</td>
<td class='csstdred'>
</td>
<td>12
</td>
</tr>
</table>
我必须删除具有类csstdred的单元格的边框,并且必须显示像没有行距的三个单元格的块。
最佳答案
使用此CSS:
table {border-collapse: collapse;}
小提琴:http://jsbin.com/ogusaq/1/edit
更新#1:
如果要其他边框:
table {border-collapse: collapse;}
td {border: 1px solid #ccc;}
.csstdred {border-color: #f00;}
小提琴:http://jsbin.com/iwenuw/1/edit
屏幕截图:
更新#2:
如果只希望一个
table
受到影响,请为表提供一个类.redborder
:table.redborder {border-collapse: collapse;}
table.redborder td {border: 1px solid #ccc;}
table.redborder .csstdred {border-color: #f00;}
小提琴:http://jsbin.com/ujabav/1/edit
更新#3:
单击
.csstdred
时,它应变为蓝色。只能使用JavaScript来完成。所以,这是代码。$(document).ready(function(){
$(".csstdred").click(function(){
$(this).toggleClass("active");
});
});
将此CSS添加为活动状态:
table.redborder {border-collapse: collapse;}
table.redborder td {border: 1px solid #ccc;}
table.redborder .csstdred {border-color: #f00;}
table.redborder .csstdred.active {border-color: #00f; border-width: 2px 1px 1px 2px; border-collapse: separate;}
小提琴:http://jsbin.com/ihejep/1/edit
更新#4
table.redborder {border-collapse: collapse;}
table.redborder td {border: 1px solid #ccc;}
table.redborder .csstdred {border-color: #f00;}
table.redborder .csstdred div {border: 1px solid #f00;}
table.redborder .csstdred.active div {border: 1px solid #00f;}
的JavaScript
$(document).ready(function(){
$(".csstdred").wrapInner("<div>").click(function(){
$(this).toggleClass("active");
});
});
小提琴:http://jsbin.com/abekup/1/edit
小提琴:http://jsbin.com/abekup/5/edit(已更新)