在前端开发中，我们常常使用 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 伪元素来为表格添加外边框，具体代码如下：
-- -------------------- ---- ------- ----- - --------- --------- - ------------- ----------- - -------- --- --------- --------- ---- ----- ----- ----- ------ ----- ------- ----- ------- --- ----- ------ - ------------ - -------- --- -
这样，表格的外边框也会重新出现了，如下图所示：
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