html - 如何在 :after pseudo elements on the tbody of a table? 上创建全宽底部边框

Question

现在我正在尝试为表格中的每个 tbody 添加底部边框。目前，我的 tr 元素周围通常有边框，但我想在向 tbody 添加底部边框时保留这些边框。

我目前在我的解决方案中使用伪元素并产生了我想要的效果，但由于某种原因伪元素的背景不是 100% 宽度。

我想知道如何在 tbody 元素上创建全宽底部边框，同时仍然保留 tr 元素上的边框？

这是我当前问题的一个 fiddle : https://jsfiddle.net/4eucexwb/

我也对 JavaScript/jQuery 解决方案持开放态度。

Answer 1

我稍微修改了 Khurrams 的解决方案，我认为这就是您想要的。

html {
  font-size: 13px;
  padding: 2rem;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.table {
  margin-bottom: 1rem;
  width: 100%;
  background-color: #e6e6f5;
  thead {
    text-align: left;
    background-color: #e6e6f5;
    th {
      padding: 0 0.75rem;
    }
  }
  tbody {
    background-color: #fff;
    &:last-child:after {
    border-bottom: 1px solid #d0d0dd;
    }
    &:after {
      content: '';
      background-color:#e6e6f5;
      display: table-row;
      height: 0.5rem;
      border-left: 1px solid #d0d0dd;
      border-right: 1px solid #d0d0dd;
    }
  }
  tbody, tfoot {
    td {
      padding: 0 0.75rem;
    }
  }
  tr {
    height: 1.75rem;
    border: 1px solid #d0d0dd;
  }
}

我为表格 (#e6e6f5) 和 tbody(白色)元素设置了背景色。之后，解决方案将近 90%。最后要做的是给 tbody:after 伪元素一个#e6e6f5 的背景色。

希望这对您有所帮助。

问候