WordPress文章中添加自适应表格

2018年4月17日10:29:28 发表评论 474
摘要

WordPress文章中添加自适应表格。前几天小伙伴问我怎么在网站中添加自适应表格。在网上寻找到这么个代码,给了他。这会儿想了想,还是收集到自己网站,下次自己需要使用的时候可以快速找到了。

WordPress文章中添加自适应表格。前几天小伙伴问我怎么在网站中添加自适应表格。在网上寻找到这么个代码,给了他。这会儿想了想,还是收集到自己网站,下次自己需要使用的时候可以快速找到了。

编辑文章切换到文本编辑模式,将下面代码添加进去,并修改其中的文字:

  1. <h3>自适应表格</h3>
  2. <div class="table-r">
  3. <table width="100%">
  4.     <tbody>
  5.         <tr>
  6.             <td width="50%">自适应表格</td>
  7.             <td width="50%">输入文字</td>
  8.         </tr>
  9.         <tr>
  10.             <td width="50%">自适应表格</td>
  11.             <td width="50%">输入文字</td>
  12.         </tr>
  13.         <tr>
  14.             <td width="50%">自适应表格</td>
  15.             <td width="50%">输入文字</td>
  16.         </tr>
  17.         <tr>
  18.             <td width="50%">自适应表格</td>
  19.             <td width="50%">输入文字</td>
  20.         </tr>
  21.     </tbody>
  22. </table>
  23. </div>

想添加更多行,多复制几个:

  1. <tr>
  2.     <td width="50%">自适应表格</td>
  3.     <td width="50%">输入文字</td>
  4. </tr>

效果如图:

WordPress文章中添加自适应表格

上面是两栏自适应表格,如果需要多栏自适应表格,可以将代码中的“50%”修改成需要的数字。3栏修改成“33.33%”,四栏修改成“25%”等。

如果想让文字居中,可以在WP编辑器中选择中,也可将下面的样式代码添加到主题css中,知更鸟主题还可以添加到主题选项→定制风格“自定义样式”中:

  1. .table-r td{
  2.     text-aligncenter;
  3. }

 



版权声明:本文由江西SEOSEO原创或整理发布,欢迎分享! 更多优化知识请查看 SEO教程

本文链接:https://www.zhushuming.cn/5552.html

weinxin
博客之家
欢迎加入博客之家,本站的资源也都会上传到博客之家。当然,更多的是交流~

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: