CSS设置Markdown渲染表格时出现异常粗边框如何解决

边框粗细异常是因为未对<table>元素自身的默认边框做重置：

• Gatsby的Markdown渲染默认样式、项目引入的第三方全局CSS、浏览器内置的用户代理样式，都可能给<table>标签预置独立边框
• 现有代码仅给<th>、<td>设置了0.1rem边框，在border-collapse: collapse边框合并规则下，表格外边缘会优先匹配优先级更高/粗细更大的预置边框，最终出现外边框远粗于内部单元格边框的问题。

调整CSS规则，统一设置table元素的边框，和单元格边框参数完全一致即可，修改后的完整代码：

table {
  width: 80%;
  border-collapse: collapse;
  /* 兼容旧浏览器，清除默认单元格间距 */
  border-spacing: 0;
  text-align: center;
  margin: auto;
  /* 给table本身配置和单元格完全相同的边框，覆盖默认样式 */
  border: 0.1rem solid #999;
}

th, td {
  border: .1rem solid #999;
  padding: .2em;
}

th {
  background-color: #555;
  color: white;
}

如果调整后仍存在样式冲突，说明项目内其他全局CSS的表格样式优先级高于当前代码，可以将选择器绑定到Markdown内容的外层容器类上提升优先级，例如Markdown内容渲染在类名为markdown-body的容器内，就将选择器对应修改为.markdown-body table、.markdown-body th, .markdown-body td即可。

内容的提问来源于stack exchange，提问作者HKS