I need to make a table more visually attractive by removing specific borders without affecting the overall design. After applying the border-collapse property, I attempted to remove the right border from certain cells using CSS. However, this unintentionally altered other borders in the table, adding unwanted white space. Here is the code snippet I used:
.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>
Seeking advice on how to selectively remove borders within the table without impacting the rest of the design.
https://i.sstatic.net/EO8jZ.jpg
The desired look for the table can be seen in this image: