相信好多小伙伴都遇到过这个问题,从其他页面复制过来的表格,后台看起来是虚线,但是发布文章后,就是没有边框,看着十分不爽,又无从下手,君哥遇到这个问题后找了好多教程,都无从下手,几经周折,终于找到了完美的解决方案,分享出来,供大家学习,如果觉着不错,点个赞或打赏一下君哥。



一、首先打开记事本,新建一个TXT文件,复制粘贴下面的代码进去。保存文件,命名为table,并且修改文件扩展名为css,也就是最终的文件名为table.css。

不会修改文件扩展名,请看教程:记事本编辑的文件怎么修改扩展名呢?文件扩展名修改方法教您修改

> / Table 表格样式 /
> .table{
> border-collapse: collapse;
> width:100%;
> border:1px solid #c6c6c6 !important;
> margin-bottom:20px;
> }
> .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;
> }
> .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;
> }
> .table tr:nth-child(odd){
> background-color:#fff !important;
> }
> .table tr:nth-child(even){
> background-color: #f8f8f8 !important;
> }
> .table>thead>tr>th {
> vertical-align: middle;
> }
> .table>thead>tr>td {
> vertical-align: middle;

二、上传table.css文件到WordPress站点根目录。

三、在Wordpress站点里面,找到主题目录里面的header.php文件,在<head>     </head>之间加入下面的代码。

注意下面两点:

1、把https://www.Wordpress.com替换为您自己的域名。

2、header.php文件在主题目录,一般为:您的域名/wp-content/themes/主题文件夹名称

> <link rel=”stylesheet” href=”https://www.Wordpress.com/table.css”>

四、清空浏览器缓存和CDN缓存,然后访问您的文章,可以惊喜发现,您的表格已经非常漂亮啦!

> 聚云网旨在收集阿里云、腾讯云、百度云等云计算产品的行业资讯,最新优惠信息,提供代金券、优惠券领取,让用户以最低的价格购买服务器,享受优质的产品服务。聚云网提供免费服务器购买咨询,科技前沿资讯,互联网行业动态,软件开发及服务器运维教程,竭全力为用户提供优质服务。点击查看更多内容
> 如果您有任何疑问,请在页面右侧点击联系聚云网客服,第一时间为您服务。