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>

CSS样式TD底边框

CSS Style TD bottom border

html

css