html로 특정 테두리를 제거하는 완벽한 방법

Question

border-collapse이 적용된 테이블이 있습니다. 테이블 내에 과 같은 일부 td 경계를 제거하고 싶습니다. 나는 다음 코드를 사용하여 작업을 수행했지만이 코드는 제거하지 않으려는 다른 테두리의 1 픽셀을 제거합니다. 제거 된 border-right가 실제로는 테이블의 위쪽 및 아래쪽 테두리에 1px solid white 추가가 어디에

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

이 어떻게 다른 국경에 영향을주지 않고 제거 할 수 있습니다

.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>

?

스 니펫에서 내 예상 된 결과는 다음과 같습니다 :

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>