jquery - 3つのセルのブロックが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を持つセルの境界線を削除し、行スパンのない3つのセルのブロックのように表示する必要があります。

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:

1 つのみtable影響を受けるようにする場合は、テーブルに class を指定します.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>