jquery - 显示像三个单元格的块必须删除单元格间距

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 的单元格的边框，并且必须像没有行跨度的三个单元格一样显示。

Answer 1

使用这个 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（更新）

Answer 2

CSS中没有修改..只是更改了html

请检查这个http://jsbin.com/uzojax/34/

Answer 3

使用可以将特定位置的 tb 更改为 div。

    <td rowspan="3" class="csstdred">
    <div><p>1</p><p>1</p><p>1</p></div>
    </td>