jquery - 显示为三个单元格的 block 必须删除 cellspacing

Question

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 的单元格的边框，并且必须显示为没有 rowspan 的三个单元格 block 。

Answer 1

使用这个 CSS:

table {border-collapse: collapse;}

fiddle :http://jsbin.com/ogusaq/1/edit

---

更新#1:

如果你想要其他边框:

table {border-collapse: collapse;}
td {border: 1px solid #ccc;}
.csstdred {border-color: #f00;}

fiddle :http://jsbin.com/iwenuw/1/edit

截图:

---

更新#2:

如果你只希望一个表受到影响，给表一个类.redborder:

table.redborder {border-collapse: collapse;}
table.redborder td {border: 1px solid #ccc;}
table.redborder .csstdred {border-color: #f00;}

fiddle :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;}

fiddle :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");
  });
});

fiddle :http://jsbin.com/abekup/1/edit

fiddle :http://jsbin.com/abekup/5/edit (更新)