私のtrボーダーをオーバーライドしたいクラス

Question

私のコードは、私のクラスを通して特定のCSSのプロパティをオーバーライドしたい、私はオーバーライドしたいにborder:none;私の特定のクラス入札者、 。あなたは誰でもこのことについて私を助けることができますか？私は...

.bidder tr, 
.bidder th, 
.bidder td { 
    border: none !important; 
} 

これを試みたが、あなたが同様に表の見出し（<th>）とテーブルセル（<td>）のスタイルをオーバーライドする必要が

.bidder tr { 
 
    border: none !important; 
 
} 
 

 
table tr, 
 
table th, 
 
table td { 
 
    border: none; 
 
    border-bottom: 1px solid #e7b2b2; 
 
    font-family: 'Lato', sans-serif; 
 
    font-size: .875rem; 
 
}

<table id="content" width="100%" bgcolor="ffffff" border="0" cellpadding="0" align="center" cellspacing="0" class="bidder"> 
 
    <tbody> 
 
    <tr> 
 
     <td width="50"> 
 
     <img src="http://icons.veryicon.com/png/System/Super%20Mono%203D/auction%20hammer.png" width="40"> 
 
     </td> 
 
     <td> 
 
     <span style="font-size:11px; color:#000000; font-weight:bold;"> Product Name </span> <br> 
 
     <span style="font-size:14px; color:#3573a4;"> Testing Scraps redodfi jdfsfjksfjk hkdfs </span> 
 
     </td> 
 
     <td width="100" align="right"> 
 
     <img src="https://www.allbids.com.au/img/logo_xs.png" width="40"> &nbsp; <img src="http://marketplace.trainzauctions.com/themes/default/img/autobid.png" width="40"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

。

.bidder tr, 
 
.bidder th, 
 
.bidder td{ 
 
    border: none !important; 
 
} 
 

 
table tr, 
 
table th, 
 
table td { 
 
    border: none; 
 
    border-bottom: 1px solid #e7b2b2; 
 
    font-family: 'Lato', sans-serif; 
 
    font-size: .875rem; 
 
}

<table id="content" width="100%" bgcolor="ffffff" border="0" cellpadding="0" align="center" cellspacing="0" class="bidder"> 
 
    <tbody> 
 
    <tr> 
 
     <td width="50"> 
 
     <img src="http://icons.veryicon.com/png/System/Super%20Mono%203D/auction%20hammer.png" width="40"> 
 
     </td> 
 
     <td> 
 
     <span style="font-size:11px; color:#000000; font-weight:bold;"> Product Name </span> <br> 
 
     <span style="font-size:14px; color:#3573a4;"> Testing Scraps redodfi jdfsfjksfjk hkdfs </span> 
 
     </td> 
 
     <td width="100" align="right"> 
 
     <img src="https://www.allbids.com.au/img/logo_xs.png" width="40"> &nbsp; <img src="http://marketplace.trainzauctions.com/themes/default/img/autobid.png" width="40"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

を働いていません。あなたのセレクタはセルまたは見出しではなく、テーブル行をターゲットにします。

Answer 3

問題はtr境界線だけを隠すことです。しかし、他の2つの要素（th、td）の境界線はまだ存在します。セレクターにもあなたにそれを与えるでしょう。

このようにします。これは、入札者クラスを持つテーブルのすべての罫線を非表示にする必要があります。

.bidder tr, .bidder th, .bidder td { 
      border: none !important; 
     } 

Answer 4

次のコードを試してみると分かりやすくなります。唯一のTR要素のどれもが、あなたにも目とTD要素の境界線を追加している：あなたのコードで

table th, table td { 
    border: none; 
    border-bottom: 1px solid #e7b2b2; 
    font-family: 'Lato', sans-serif; 
    font-size: .875rem; 
} 
.bidder th, 
.bidder td { 
    border: none; 
} 

あなたが境界線を使用していません。したがって、thとtd要素にborder：noneを使用する必要があります。

Answer 5

ちょうど.bidder trの後にtdを追加すると、trの中の要素をターゲットにすることができます。あなたは、セレクタリストに.bidder th, .bidder tdを追加する必要が

.bidder tr td { 
 
    border: none !important; 
 
} 
 

 
table tr, 
 
table th, 
 
table td { 
 
    border: none; 
 
    border-bottom: 1px solid #e7b2b2; 
 
    font-family: 'Lato', sans-serif; 
 
    font-size: .875rem; 
 
}

<table id="content" width="100%" bgcolor="ffffff" border="0" cellpadding="0" align="center" cellspacing="0" class="bidder"> 
 
    <tbody> 
 
    <tr> 
 
     <td width="50"> 
 
     <img src="http://icons.veryicon.com/png/System/Super%20Mono%203D/auction%20hammer.png" width="40"> 
 
     </td> 
 
     <td> 
 
     <span style="font-size:11px; color:#000000; font-weight:bold;"> Product Name </span> <br> 
 
     <span style="font-size:14px; color:#3573a4;"> Testing Scraps redodfi jdfsfjksfjk hkdfs </span> 
 
     </td> 
 
     <td width="100" align="right"> 
 
     <img src="https://www.allbids.com.au/img/logo_xs.png" width="40"> &nbsp; <img src="http://marketplace.trainzauctions.com/themes/default/img/autobid.png" width="40"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>