htmlの特定の罫線を削除する完璧な方法

Question

私はborder-collapseのテーブルを持っています。テーブル内になどの一部のtd境界線を削除したいとします。私は仕事をするために以下のCSSを使いましたが、このコードは削除したくない他のボーダーの1pxを削除します。実際にはborder-right削除トップやテーブルの下の境界線に1px solid whiteが追加されますが、私は他の国境に影響を与えずに削除することができますどのように

.no-border-right { 
 
     border-right: solid 10px #FFF!important; 
 
    } 
 

 
    table { 
 
     border-collapse: collapse; 
 
     font-size: 16px; 
 
     padding: 6px; 
 
    } 
 
    table td { 
 
     border: 10px solid gray;  
 
    } 
 
    table th { 
 
     border: 10px solid gray;  
 
    }

<table align="center"> 
 
    <tr> 
 
     <th>sl</th> 
 
     <th>name</th> 
 
     <th>score</th> 
 
     <th>rank</th> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>John</td> 
 
     <td>2</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td class="no-border-right">James</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
    </tr> 
 
</table>

<table> 
    <tr> 
     <th></th> 
     <th></th> 
     <th></th> 
    </tr> 
    <tr> 
     <td></td> 
     <td class="no-border-right"></td> 
     <td></td> 
    </tr> 
</table> 

でしたか？

スニペットから私の期待される結果は以下の通りです：

Answer 1

table { 
 
    border-collapse: collapse; 
 
    padding: 6px; 
 
} 
 
table td, table th { 
 
    border: 1px solid gray; 
 
} 
 
table td.no-border-right { 
 
    border-right: none!important; 
 
} 
 
table td.no-border-right + td { 
 
    border-left: none!important; 
 
}

<table align="center"> 
 
    <tr> 
 
     <th>sl</th> 
 
     <th>name</th> 
 
     <th>score</th> 
 
     <th>rank</th> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>John</td> 
 
     <td>2</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td class="no-border-right">James</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
    </tr> 
 
</table>

Answer 2

あなたはまた、あなたのためにそれを行う必要がありborder-right: none;を使用する必要があります私はあなたが立ち往生した場合、そこにコードスニペットを残しました。

.no-border-right { 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
    /* from here up is not it's necessary just to help visually see it demonstration */ 
 
    
 
    border-right: none; /* Use this to remove right border */ 
 
}

<div class="no-border-right"> 
 
    <p>Hello Wolrd!</p> 
 
</div>

Answer 3

はそうのような右の境界線の色のアルファ0を行います

border-right { 10px solid rgba(0,0,0,0); } 

.no-border-right { 
 
     border-right: 10px solid rgba(0,0,0,0); 
 
    } 
 

 
    table { 
 
     border-collapse: collapse; 
 
     font-size: 16px; 
 
     padding: 6px; 
 
    } 
 
    table td { 
 
     border: 10px solid gray;  
 
    } 
 
    table th { 
 
     border: 10px solid gray;  
 
    }

<table align="center"> 
 
    <tr> 
 
     <th>sl</th> 
 
     <th>name</th> 
 
     <th>score</th> 
 
     <th>rank</th> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>John</td> 
 
     <td>2</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td class="no-border-right">James</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
    </tr> 
 
</table>