弃用 TablePress，纯 CSS 款式美化表格

因为本人往常学习的过程中喜爱收拾学问点，而关于很多学问点的收拾表格无疑是最简单明了的方法，之前博客上不断运用的是一款名为 TablePress 的插件来中止收拾的，最初运用这款插件觉得还不错，可自定义款式、支撑表格的独立办理，而且可以将做好的表格导出成 JSON 、CSV 或者是 HTML 格式，就我目前所接触到的 WordPress 表格插件来说,TablePress 无疑是最好的。

可是，运用这款插件的问题就是，当插件停用后一切设置的表格都将不在闪现，之前我在 为什么要减少WordPress插件的运用？ 这篇文章中也说到过，关于这种功用性、美化性的插件仍是能少用就少用，否则那一天插件不更新了，或者跟其他插件冲突了，你说你是持续用仍是不必？

其实这仍是小问题，主要是最近发现由 TablePress 生成的表格前端闪现变成了下面这幅样子：或许是我批改主题批改的吧，具体缘由我也没仔细检查。还有一点需求说到的是，之前我在申请百度熊掌号的时分遇到了落地页体会差的坑，刚开端我以为是网站加载速度慢，后来我用“挪动落地页检测”（百度搜索资源渠道/用户中心/站点办理/站点属性设置/优化与保护/挪动落地页检测）检测了一下，发现用插件生成的表格，单一的表格还可以，多个表格呈现在一篇文章中的话因为表格内容不同，在挪动端多个表格不能主动按不同比例减少使左右对齐，这使得页面不符合百度的“落地页规范”！思来想去，终究决议再也不偷闲了，运用纯代码的方法将表格写死，一劳永逸，并调整下表格使其符合落地页规范。好了，下面仍是具体说一下完成方法。生成表格因为 TablePress 支撑导出表格，所以这中心的表格我是直接用的导出成 HTML 格式，然后复制过来的。

当然后期的话咱们可以用 Excel 画好表格直接复制到 WordPress 文本编辑器（可视化）界面即可。代码会主动生成。其实无非就是些<table><thead><tbody><tr><th><td>标签之类的。CSS美化直接生成的 HTML 表格前端闪现有多丑我就不说了。当然一些主题或许曾经运用 CSS 美化了，比如我所运用的 DUX 主题，可是主题自带的美化效果或许并不能满足咱们的需求，比如 DUX主题自带的表格美化如下，表头（标题行）闪现不突出。所以我自行美化了一下，美化后效果如下：最终奉上我所运用的 CSS 代码：

/** Table 表格款式 **/
.qgg-table{ border-collapse: collapse; width:100%; border:1px solid #c6c6c6 !important; margin-bottom:20px;}.qgg-table th{ border-collapse: collapse; border-right:1px solid #c6c6c6 !important; border-bottom:1px solid #c6c6c6 !important; background-color:#ddeeff !important; padding:5px 9px; font-size:14px; font-weight:normal; text-align:center;}.qgg-table td{ border-collapse: collapse; border-right:1px solid #c6c6c6 !important; border-bottom:1px solid #c6c6c6 !important; padding:5px 9px; font-size:12px; font-weight:normal; text-align:center; word-break: break-all;}.qgg-table tr:nth-child(odd){ background-color:#fff !important; }.qgg-table tr:nth-child(even){ background-color: #f8f8f8 !important;}
批改完成后从头检测一下落地页规范。