テーブル内のすべてのセルの境界線を削除するにはどうすればよいですか？

Question

私は以下のような構造のテーブルを持っていて、そのページは灰色の背景になっています。私が抱えている問題は、細胞の境界線を取り除くことです。

<table width="510"> 
<tbody> 
<tr> 
<td style="background-color: #fff;" colspan="2" width="510"></td> 
</tr> 
<tr> 
<td style="background-color: #fff;"></td> 
<tdstyle="background-color: #fff;"></td> 
</tr> 
<tr> 
<td style="background-color: #fff;"></td> 
<td style="background-color: #fff;"></td> 
</tr> 
<tr> 
<td colspan="2"></td> 
</tr> 
</tbody> 
</table> 

これは、私がこのような<tr>に.NO-Borderクラスborder:0;を追加したり、<td>にインラインCSSを追加して試してみましたが何に関係なく、どのように見えるかです。それはまだ私はすべてのセルの周囲に境界線を削除するにはどうすればよい

...このように出てきますか？

Answer 1

あなたはこのようCELLSPACINGを削除する必要があります。

table { 
    border-spacing: 0; 
    border-collapse: collapse; 
} 

これはcellspacing="0" HTML属性のと同じです。この例を参照してください：

FYI

body { 
 
    background: grey; 
 
} 
 
table { 
 
    border-spacing: 0; 
 
    border-collapse: collapse; 
 
}

<table width="510"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="background-color: #fff;" colspan="2" width="510">t</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="background-color: #fff;">t</td> 
 
     <td style="background-color: #fff;">t</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="background-color: #fff;">t</td> 
 
     <td style="background-color: #fff;">t</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2">t</td> 
 
    </tr> 
 
    </tbody> 
 
</table>