WordPress文章页显示和Markdown编辑器预览效果中表格一样的css样式

前天写了《PHP判断数据类型的方法有哪些？PHP如何判断数据类型？》之后，因为在文章中使用了一个表格，在WP Githuber MD的Markdown编辑器中，因为我开启了即时预览效果，将Markdown编辑器分成了两栏，可以看到即时的前端效果，在预览效果中表格是能正常显示出来的，但是在文章发布之后，却没有显示出Markdown编辑器中的效果，查看源代码打开浏览器开发者工具发现表格的样式代码并没有写，所以前端就不会显示出表格样式。

Markdown编辑器中即时预览效果中的表格样式截图：

即时预览中因为插件的样式中写入了表格的Css样式，而我的前端页面中当时在写主题的时候，并没有考虑到表格问题，所以当时也没有写表格类的Css样式。

未写表格的Css样式，前端显示的表格截图：

也懒得写表格的Css样式了，直接打开了浏览器的开发者工具，查看到了Markdown编辑器即时预览中表格的Css样式，直接Copy了过来，但是有两处还是有问题。

第一个问题：整个table的边框并没有显示出来。解决办法：

border-collapse: collapse;合并内外边距,去除表格单元格默认的2个像素内外边距。这样就基本上显示了正常的表格效果。

第二个问题：没有向即时效果里的隔行换色效果。解决办法：

这个更不是问题，直接使用了Css选择器让tr是偶数的时候改变下背景颜色就OK了。

在style.css中写入了内容页正文部分表格的Css样式：

.article_main table {
    display: block;
    width: 100%;
    overflow: auto;
    border-collapse: collapse;
}
.article_main table thead tr {
    background-color: #f8f8f8;
}
.article_main table tbody{
    border: 1px solid #dfe2e5;
}
.article_main table th {
    font-weight: 600;
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
}
.article_main table tr {
    background-color: #fff;
    border-top: 1px solid #c6cbd1;
}
.article_main table tr:nth-child(even){
    background-color:#f8f8f8;
}
.article_main table td {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
}

访问了下style.css文件，后又刷新了下style.css样式表，再次访问就出现了和Markdown编辑器中即时预览效果一样的表格效果。

写了表格的Css样式，前端显示的表格截图：

总的来说其实还是一个前端的文章，就是一个简单的表格的Css样式，其实和WordPress的WP Githuber MD的Markdown编辑器关系不大。