在前端开发中, 我们经常会使用 CSS Reset 来清除浏览器默认样式，从而保证跨浏览器一致性。然而这个做法并不总是完美的，因为部分 Reset 的样式可能会导致表格的边框出现问题。本文将深入探讨造成这种现象的原因，并提供解决方案和相关示例代码。
1. 问题分析
比如以下简单的 HTML 表格：
-------
-------
----
-----------
-----------
-----
--------
-------
----
-----------
-----------
-----
----
-----------
-----------
-----
--------
--------运用一些比较流行的 reset 样式：
- - ------- -- -------- -- - ----- - ---------------- --------- -
结果会发现表格的边框消失了，当然我们可以通过 border 属性手动添加边框，但这样就失去了 Reset 的初衷了。那么该怎样处理这个问题呢？
2. 解决方案
2.1 使用 border-spacing
首先，我们可以尝试使用 border-spacing 来替代 border-collapse，代码如下：
- - ------- -- -------- -- - ----- - --------------- -- -
这样，表格的边框就能够正确显示了。此外，可以通过调整 border-spacing 的值来实现不同的展示效果。
2.2 重置 td/th 样式
另外，我们还可以在 Reset 样式表中新增一些对表格元素的样式定义，以恢复表格边框，代码如下：
- - ------- -- -------- -- - ----- - ---------------- --------- - --- -- - ------- --- ----- ----- -
这个做法比较直接，但是需要手动设置每个表格单元格的样式定义。
3. 结论
综上所述，CSS Reset 虽然有很多好处，但也需要注意其特定的应用场景。当出现表格边框消失问题时，我们可以采用 border-spacing 属性或者手动定义表格单元格的样式来解决该问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6729ad282e7021665e254862