在前端开发中，经常使用table标签用于展示表格。然而，table在不同浏览器下的表现各不相同，这给开发带来了不必要的麻烦。为了解决这个问题，很多前端工程师会采用CSS Reset技术，在样式重置的基础上开发table。本文将介绍CSS Reset对table的影响，以及如何解决这些问题。
CSS Reset
CSS Reset是一种常见的前端技术，用于清除浏览器对HTML元素的默认样式，确保在不同浏览器下页面的呈现效果一致。一般会在开发之前引入CSS Reset文件，它会在所有的样式之前被加载。
很多开发者会选择以下两种常用的CSS Reset方案：
- Eric Meyer's CSS Reset
- Normalize.css
Eric Meyer's CSS Reset可以将浏览器的所有默认样式重置，包括padding、margin、border、font-size等等，以确保样式的一致性。Normalize.css则着重于修复浏览器之间的差异，不会将所有样式全部重置，而是让各个浏览器之间的表现尽可能一致。
CSS Reset对table的影响是，会将table的样式全部清除，如边框、背景色、文字颜色等，导致table丢失原有的样式，变得无法识别。下面是一个示例：
-- -------------------- ---- -------
---- ------- ----- ---
-------
----
-----------
-----------
-----
----
------------
-----------
-----
----
--------------
-----------
-----
--------在没有使用CSS Reset的情况下，上述代码在不同浏览器下的展示效果是一致的，如下图所示：
而使用CSS Reset后，table的样式全部消失，如下图所示：
解决办法
为了解决CSS Reset对table的影响，我们可以针对table重新设置样式。下面是一个常见的table样式设置：
-- -------------------- ---- ------- ----- - ---------------- --------- --------------- -- - ----- --- ----- -- - ------- --- ----- ----- -------- ---- - ----- -- - ----------------- -------- ------ ----- ------------ ------- -
上述代码将table的边框和单元格之间的间距设置为0，同时为每个单元格添加1px的灰色边框和8px的内边距。表头单元格的背景色设置为灰色，文字颜色设置为#666，字体设置为normal。通过这些设置，我们可以重新拥有带有边框和背景色的table。
结论
CSS Reset是一个通用的技术，可以确保在不同浏览器下页面呈现效果的一致性。但是，它对某些HTML元素的样式影响可能导致一些问题。对于table标签，我们可以通过重新设置样式来解决问题。通过本文的介绍，希望可以帮助你更好地理解CSS Reset技术，以及解决table的样式问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677628d76d66e0f9aa0adb01