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