Perfect way to remove specific border in 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:

Would need to see the rest of the code ( html / CSS ) or a rendered copy of the page. — Pytth
– Pytth, Commented Sep 22, 2017 at 18:07

Farhad Bagherlo · Accepted Answer · 2017-09-22 18:57:49Z

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>

This removes all the borders inside the table. I want specific border. Please look at the updated question.
does not work well with border-bottom. But it deserves accepted as it gives me info and answer my question. Thanks.

just.an.atom · Accepted Answer · 2017-09-22 18:19:46Z

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>

sn3ll · Accepted Answer · 2017-09-22 18:46:48Z

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>

Thanks for the answer, but as you can see from the output of your snippet, the white color is still there right above James
Not on my screen. What browser are you using? Im on latest Chrome.

Collectives™ on Stack Overflow

Perfect way to remove specific border in html

3 Answers 3

3 Comments

3 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

3 Comments

Related