CSS Style TD 下边框

Question

I'm trying to style the bottom border of a TD. The attached image shows this working as I'd like but the border is slightly too long, I'd like it to match the width of the blue cell above it.

Here is my code:

 table { border-collapse: collapse; width: 100%; } .tab { border-collapse: separate; background-color: #5B86EE; text-align: center; border-width: 1px; border-bottom: solid 3px #A0A0A0; border-top: solid 3px #E1E1E1; border-left: solid 3px #E1E1E1; border-right: solid 3px #E1E1E1; display: table-cell; border-top-left-radius: 5px; border-top-right-radius: 5px; } .active { background-color: #5B86EE; text-align: center; border-width: 1px; border-bottom-width: 2px; border-bottom: solid 3px #640000; border-top: solid 3px #E1E1E1; border-left: solid 3px #E1E1E1; border-right: solid 3px #E1E1E1; border-top-left-radius: 5px; border-top-right-radius: 5px; }

 <table border="0" width="100%%" align="center"> <tbody> <tr> <td class="tab">1</td> <td class="active">2</td> <td class="tab">3</td> </tr> </tbody> </table>

I have no control over the HTML being used, but I can change the CSS. Is there anyway to make the bottom border match the width of the cell excluding the left or right border width ?

Also viewing this in Firefox and the border over hang is on the other end, so on the left not the right.

Answer 1

You could use a pseudo element instead of a bottom border:

 table { border-collapse: collapse; width: 100%; } .active, .tab { border-collapse: separate; background-color: #5B86EE; text-align: center; border-width: 1px; border-bottom: solid 3px #A0A0A0; border-top: solid 3px #E1E1E1; border-left: solid 3px #E1E1E1; border-right: solid 3px #E1E1E1; border-top-left-radius: 5px; border-top-right-radius: 5px; position: relative; } .active:after { content: ''; display: block; position: absolute; top: 100%; left: 0; right: 0; border-bottom: solid 3px #640000; }

 <table border="0" width="100%%" align="center"> <tbody> <tr> <td class="tab">1</td> <td class="active">2</td> <td class="tab">3</td> </tr> </tbody> </table>