在前端开发中，我们经常使用 CSS Reset 来统一不同浏览器的默认样式，以便更好地控制页面的样式。然而，CSS Reset 对于 table 元素的影响却经常被忽略，导致页面出现意料之外的样式问题。本文将介绍如何解决这个问题。
CSS Reset 对于 table 的影响
在 CSS Reset 中，通常会将所有元素的 margin 和 padding 都设置为 0，以便更好地控制页面的样式。但是，这个设置对于 table 元素来说并不适用，因为 table 元素的 margin 和 padding 是有默认值的，如果将其设置为 0，会导致 table 元素的样式出现问题。
例如，下面的代码是一个简单的表格：
-------
----
-----------
-----------
-----------
-----
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
--------如果应用了 CSS Reset，表格的样式会出现问题，如下图所示：
可以看到，表格的边框消失了，单元格之间的间距也变得很小。
解决方法
为了解决 CSS Reset 对于 table 的影响，我们需要对 table 元素进行特殊处理，恢复其默认样式。
1. 重新设置 margin 和 padding
可以针对 table 元素重新设置 margin 和 padding，将其恢复为默认值。例如：
----- - ------- --- -- -------- -- -
这里将 margin 设置为 8px 0，是因为 table 元素的默认 margin 值是 8px。
2. 重新设置边框样式
CSS Reset 通常会将所有元素的边框样式设置为 0，但是对于 table 元素来说，我们需要重新设置其边框样式。例如：
----- - ---------------- --------- --------------- -- - --- -- - ------- --- ----- ----- -
这里将 border-collapse 设置为 collapse，将 border-spacing 设置为 0，可以让边框样式更加统一。同时，为 th 和 td 元素重新设置边框样式，以便更好地控制单元格的样式。
3. 设置单元格间距
为了控制单元格之间的间距，可以使用 border-spacing 属性。例如：
----- - ---------------- --------- --------------- ---- -
这里将 border-collapse 设置为 separate，将 border-spacing 设置为 8px，可以让单元格之间的间距更加合适。
示例代码
下面是一个完整的示例代码，演示如何解决 CSS Reset 对于 table 的影响：
--------- -----
------
------
----- ----------------
---------- ----- -- ----- -----------
-------
-- --- ----- --
- -
------- --
-------- --
----------- -----------
-
-- ---- ----- -- --
----- -
------- --- --
-------- --
---------------- ---------
--------------- --
-
-- ---- -- - -- -- --
--- -- -
------- --- ----- -----
-------- ----
-
-- ------- --
----- -
---------------- ---------
--------------- ----
-
--------
-------
------
-------
----
-----------
-----------
-----------
-----
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
--------
-------
-------总结
在使用 CSS Reset 的时候，需要注意对于 table 元素的特殊处理。重新设置 margin、padding、边框样式和单元格间距，可以解决 CSS Reset 对于 table 的影响。同时，也可以根据实际需求进行调整，以便更好地控制页面的样式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/656154c6d2f5e1655db6541b