CSS Style TD bottom border

Issue

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.

enter image description here

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.

Solution

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>

Answered By – Pete

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.