CSS 样式 TD 下边框

Question

我正在尝试设置 TD 底部边框的样式。附图显示了此工作原理，但边框有点太长，我希望它与其上方蓝色单元格的宽度相匹配。

这是我的代码：

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>

我无法控制正在使用的 HTML，但我可以更改 CSS。无论如何，是否可以使底部边框与单元格的宽度（不包括左边框或右边框宽度）相匹配？

同样在 Firefox 中查看此内容，边框悬垂在另一端，因此在左侧而不是右侧。

Answer 1

您可以使用伪元素代替底部边框：

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>