wordpress自带的表格不能自适应屏幕宽带,每次新建了表格,电脑上显示正常的,结果换到手机上就超出屏幕宽度了,很麻烦,更重要的是很不美观,本次我就问为大家带来一个添加自适应表格的教程。
案列分析
我们可以看到代码中关于定义table(表格)属性的代码是(重点):
style="table-layout: fixed;" border="1" width="100%" cellspacing="0" cellpadding="2">
上述代码解析:border—表格的线宽为1;cellspacing—表格内数据与表格间隔为0;cellpadding—单元格与单元格间隔为2,这样就可以实现表格自适应了,但是有个问题里面的文字会自动换行,导致高度发生变化,也不是很好看。所以我还带来了一种方法
自适应表格代码:
还有一种办法就是给文字也加上自适应,不过上面的代码就不适用了,如果要实现文字和表格都自适应可以用下面的代码:
系统自适应表格 class="table-r"> width="100%"> width="50%">自适应表格 width="50%">输入文字 width="50%">自适应表格 width="50%">输入文字 width="50%">自适应表格 width="50%">输入文字 width="50%">自适应表格 width="50%">输入文字
上面就是自适应表格的代码了,如果还想添加更多行和列,自己复制几行就行了。就是每次编辑文章的时候很麻烦,需要自己一个个找到并输入字体,总体感觉不是很直观。不过这个目前来说还是很实用。还有就是上面的示例代码中为两栏自适应表格,如需多栏自适应表格,还需要将代码中的“50%”修改成3栏“33.33%”或着四栏修改成“25%”等。以此类推就行了。
表格字体居中代码:
上述表格创建好了,里面的字体不会居中,你如果想还让表格内的字体居中对齐的话,那么需要在wordpress主题的style样式表中添加以下样式,达成居中效果。
1 2 3 .table-r td{ text-align: center; }
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《给WordPress添加自适应表格 让表格自适应屏幕》
文章链接:https://www.liuzhanwu.com/15888.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
相关推荐
- #20周年庆典#SiteGround:稳定博客/外贸主机,免费站点转移/电子邮件/SSL证书/CDN和备份服务等,月付$2.99/年付35.88美元起
- #新春特惠#莱卡云:韩国/香港/美国云服务器首月仅需9.9元,不限制新老用户,4C4G的年付249元/起,独服450.00元/月起
- #圣诞节促销#Hostarmada:共享主机80%优惠,低至$1.99/月起,vps和经销商主机50%优惠,$19.6/月起,可选新加坡/法兰克福等9个机房
- #4周年庆典#Hostarmada:共享主机80%优惠,低至$1.99,vps和经销商主机50%优惠,可选新加坡/法兰克福等9个机房
- #黑五优惠预告#SiteGround:WordPress主机/外贸主机最高优惠85%,同样服务全年最低价格,月付$1.99起
- #11.11#Themebetter:年度大放价,全场6折特惠,DUX主题折后480元,不限制域名授权数目
- FastComet:2023黑五早鸟活动开启, 美国虚拟主机2折促销,月付$2.19起
- #十月优惠#SiteGround:博客主机/外贸主机最高优惠83%,月付$2.99起,赠送三个月站点扫描服务/站点转移/电子邮件/SSL证书/CDN和备份服务等