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(已更新)

10-05 20:27
查看更多