CSS Reset 后实现表格外边框的解决方法

在前端开发中，我们常常使用 CSS Reset 来重置浏览器的默认样式，以便更好地掌控页面的布局和样式。然而，在使用 CSS Reset 后，我们可能会遇到一个问题：表格外边框消失了。这篇文章将介绍如何解决这个问题。

问题描述

在使用 CSS Reset 后，表格的外边框会消失，如下图所示：

这是因为 CSS Reset 会将所有元素的 margin 和 padding 设置为 0，而表格的外边框实际上是由 border 属性来控制的，因此也被重置了。

解决方法

要解决这个问题，我们需要重新设置表格的外边框。下面是一些常用的方法：

1. 使用 border-collapse 属性

我们可以使用 border-collapse 属性来设置表格的外边框，具体代码如下：

table {
  border-collapse: collapse;
  border: 1px solid black;
}

这样，表格的外边框就会重新出现了，如下图所示：

2. 使用 :before 和 :after 伪元素

我们还可以使用 :before 和 :after 伪元素来为表格添加外边框，具体代码如下：

table {
  position: relative;
}
table:before,
table:after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid black;
}
table:before {
  z-index: -1;
}

这样，表格的外边框也会重新出现了，如下图所示：

3. 使用 box-shadow 属性

最后，我们还可以使用 box-shadow 属性来为表格添加外边框，具体代码如下：

table {
  box-shadow: 0 0 0 1px black;
}

这样，表格的外边框也会重新出现了，如下图所示：

总结

在使用 CSS Reset 后，表格的外边框会消失，但我们可以使用 border-collapse 属性、:before 和 :after 伪元素以及 box-shadow 属性来重新设置表格的外边框。这些方法都有其优缺点，我们需要根据实际情况选择最适合的方法。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658c2e37eb4cecbf2d18fec4