在前端开发中，CSS Reset（CSS 样式重置）是一个常见的技术，它可以帮助我们解决不同浏览器之间的 CSS 样式不一致的问题。但是在使用 CSS Reset 的过程中，可能会对表格样式产生影响，从而导致表格样式混乱，本文将介绍 CSS Reset 对表格样式的影响及其解决方案。
CSS Reset 对表格样式的影响
在使用 CSS Reset 的时候，它会将默认的样式全部清除，包括表格的样式。因此，在使用 CSS Reset 的时候，表格样式可能会变得混乱不堪。比如，表格的边框、背景色、字体等样式都可能会出现问题。
下面我们来看一下，不使用 CSS Reset 和使用 CSS Reset 时表格样式的差别。我们先来看一个简单的表格：
-- -------------------- ---- -------
-------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
--------
--------不使用 CSS Reset 的时候，表格的样式是这样的：
我们可以看到，表格的默认样式已经很不错了，包括边框、字体大小和颜色、背景色等都很合适。但是，我们还是要使用 CSS Reset，看看它会对表格样式产生什么影响。
下面是一个常见的 CSS Reset 样式：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}经过 CSS Reset 处理后，表格的样式变得混乱不堪，如下图所示：
我们可以看到，表格的边框消失了，字体大小和颜色也变了。这说明 CSS Reset 对表格样式产生了不良影响。
CSS Reset 对表格样式的解决方案
既然使用 CSS Reset 会对表格样式产生不良影响，那么我们该怎么解决呢？下面介绍几种解决方案。
1. 适当调整 CSS Reset 样式
第一种解决方案是适当调整 CSS Reset 样式，保留表格的一些默认样式或者重新设置表格的样式。比如，我们可以添加一些样式来重新设置表格的边框和字体，如下所示：
-- -------------------- ---- ------- - - ------- -- -------- -- ----------- ----------- - ----- - ---------------- --------- ---------- ----- ------ ----- - --- -- - ------- --- ----- ----- -------- ---- -
经过这样的调整，表格的样式变得舒适了不少，如下图所示：
我们可以看到，表格的样式和默认样式比较一致了，只是字体和边框稍有不同。这种方法可以通过不断尝试和调整，逐步找到最适合自己项目的样式。
2. 使用 CSS Reset 前最好自己定义表格样式
第二种解决方案是在项目中自己定义表格样式，并在使用 CSS Reset 之前，将表格的样式设置为一个类，然后在 CSS Reset 中将这个类忽略掉。这样，CSS Reset 不会影响表格的样式，而自己定义的表格样式仍然会生效。比如：
-- -------------------- ---- -------
------ -----------------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
--------
---------- -------------------- ---- ------- -------------- - ---------------- --------- ---------- ----- ------ ----- - -------------- --- -------------- -- - ------- --- ----- ----- -------- ---- -
-- -------------------- ---- ------- -- ------ -- - - ------- -- -------- -- ----------- ----------- - -- ------ -- ------ ------- ------- -------- - ------- -- -------- -- ------- ----- -------- ----- ----------- ----------- ------------ -------- ---------- -------- ------ -------- ----------------- ------------ -
这样就可以避免 CSS Reset 对表格样式的影响了。
3. 使用 normalize.css 代替 CSS Reset
第三种解决方案是使用 normalize.css 代替 CSS Reset。normalize.css 和 CSS Reset 功能类似，但是它只会对浏览器默认样式做必要的重置，比如修复许多常见的、跨浏览器问题的 bug，并不会完全清除所有默认样式，因此对表格样式的影响比较小。
使用 normalize.css 的方法很简单，在项目中引入 normalize.css 文件即可：
<link rel="stylesheet" href="normalize.css">
经过 normalize.css 处理后的表格样式示意图：
我们可以看到，这个表格的样式已经比 CSS Reset 处理后的样式舒适了很多。
总结
CSS Reset 在前端开发中是一个很常见的技术，使用它可以帮助我们解决跨浏览器的样式不一致问题。但在使用 CSS Reset 的过程中，我们也要注意表格样式的变化，避免出现表格样式混乱的情况。本文介绍了三种解决方案，即适当调整 CSS Reset 样式、使用自己定义的表格样式以及使用 normalize.css，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645e22fc968c7c53b0089e0a