特定のtdの罫線を隠す方法または削除する方法

これは前に回答があったことを知っていますが、thisポストにありますが、私はそれを私のコードに適用しようとしていて、何が間違っているのか分かりません。特定のtdの罫線を隠す方法または削除する方法

これは私が取得しようとしているものです：

IWantThis

これは私が持っているものです。

table { 
 
    border-collapse: collapse; 
 
} 
 
.noborders > td { 
 
    border: none; 
 
}

<table border="1"> 
 
    <thead></thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>ye</td> 
 
     <td>ye</td> 
 
     <td>ye</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ye</td> 
 
     <td>ye</td> 
 
     <td>ye</td> 
 
    </tr> 
 
    <tr class="noborders"> 
 
     <td>no</td> 
 
     <td>no</td> 
 
     <td>no</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

これは私が得ているものですそのコード：

wrongtable

私は、CSSの一部にtable{border-bottom:0}てみましたこれはほとんど動作し、私が間違っているものを見ることができ、私は3列目のTDの上border: noneを使用するときに第三列から削除することはできませんテーブル全体の境界線です。

ありがとうございます。

出典

2016-10-08 Roberto Sepúlveda Bravo

だけで全体が

table{ 
 
    border-collapse: collapse; 
 
} 
 
.noborders > td{ 
 
     border-color: transparent; 
 
    border-bottom-style: hidden; 
 
    border-right-style: hidden; 
 
    border-left-style: hidden; 
 
}

<table border="1"> 
 
    <thead></thead> 
 
    <tbody> 
 
     <tr><td>ye</td><td>ye</td><td>ye</td></tr> 
 
     <tr><td>ye</td><td>ye</td><td>ye</td></tr> 
 
     <tr class="noborders"><td>no</td><td>no</td><td>no</td></tr> 
 
    </tbody> 
 
</table>

出典

2016-10-08 05:45:08 Ralis

がすごいです、それは私が必要としていたものでした！ –

@Pancreaticoあなたはブラウザのinspect要素の機能を使用する必要があります。 – Ralis

テーブル全体にボーダーを使用しないでくださいようになります。この

.noborders > td{ 
     border-color: transparent; 
    border-bottom-style: hidden; 
    border-right-style: hidden; 
    border-left-style: hidden; 
}

でTD> .nobordersのためのあなたのCSSを変更します。特定の列で枠線を使用できます。

これを試してください。今ここ

.bor{ 
 
    border:solid 1px #000; 
 
    
 
} 
 
table{ 
 
    border-collapse: collapse; 
 
    }

<html> 
 
    <body> 
 
    <table> 
 
     <tr> 
 
     <td class="bor">Ye</td> 
 
     <td class="bor">Ye</td> 
 
     <td class="bor">Ye</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="bor">Ye</td> 
 
     <td class="bor">Ye</td> 
 
     <td class="bor">Ye</td> 
 
     </tr> 
 
     <tr> 
 
     <td>no</td> 
 
     <td>no</td> 
 
     <td>no</td> 
 
     </tr> 
 
    </table> 
 
    </body> 
 
    </html>

出典

2016-10-08 05:46:00 Pirate

そんなに、><私はこれについて非常に新しいです。 –

が解決

table{ 
 
    border-collapse: collapse; 
 
} 
 
/*use this class */ 
 
.noborders{ 
 
    border-left: 1px solid transparent; 
 
    border-right: 1px solid transparent; 
 
    border-bottom: 1px solid transparent; 
 
}

<table border="1"> 
 
    <thead></thead> 
 
    <tbody> 
 
     <tr><td>ye</td><td>ye</td><td>ye</td></tr> 
 
     <tr><td>ye</td><td>ye</td><td>ye</td></tr> 
 
     <tr class="noborders"><td>no</td><td>no</td><td>no</td></tr> 
 
    </tbody> 
 
</table>

出典

2016-10-08 07:56:10

特定のtdの罫線を隠す方法または削除する方法

答えて

関連する問題