1. 云期刊首页
  2. 开发教程

wordpress复制粘贴的表格没有边框,怎么能够彻底解决呢?

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

wordpress复制粘贴的表格没有边框,怎么能够彻底解决呢?

一、首先打开记事本,新建一个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缓存,然后访问您的文章,可以惊喜发现,您的表格已经非常漂亮啦!

云期刊旨在收集阿里云、腾讯云、百度云等云计算产品的行业资讯,最新优惠信息,提供代金券、优惠券领取,让用户以最低的价格购买服务器,享受优质的产品服务。云期刊提供免费服务器购买咨询,科技前沿资讯,互联网行业动态,软件开发及服务器运维教程,竭全力为用户提供优质服务。点击查看更多内容

如果您有任何疑问,请在页面右侧点击联系云期刊客服,第一时间为您服务。

本站所有内容,如有版权、侵权等问题,请及时联系本站做删除。发布者:云期刊,转载请注明出处:https://www.yunqikan.cn

发表评论

电子邮件地址不会被公开。 必填项已用*标注

问答社区 在线客服
联系我们

QQ 技术:109033286

QQ 运维:3423710838

email 邮箱:drhxxkj@163.com

Qqun QQ交流群:808026766

分享本页
返回顶部