在html中刪除特定邊框的完美方法

Question

我有一個應用了border-collapse的表格。我想在表格中刪除一些td邊框，例如border-right。我使用下面的CSS來完成這項工作，但是這段代碼也刪除了我不想刪除的其他邊框的1px。事實上，它增加了1px solid white表中的頂部和底部邊框在去除border-right在那裏

.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

做出正確的邊界顏色的alpha 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>