Perfect way to remove specific border in html - html

Question

I have a table with border-collapse applied. I want to remove some td border such as border-right within the table. I used the following css to do the job but this code also remove 1px of the other borders I don't want to remove. In fact it adds 1px solid white to the top and bottom border of the table where the removed border-right was there
.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>
How can I remove without affecting the other borders?
My expected result from the snippet is below:

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

You need to use the border-right: none; that should do it for you, also I left you a code snippet down there if you get stuck.
.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

Make the right-border color's alpha 0 like so:
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>