WordPress文章中添加支持自适应表格代码

转载 挖主题  2019-04-12 16:30  阅读 2,539 次 评论 0 条 百度已收录
默认的wordpres程序是无表格插入功能,并且对于大部分成熟的主题表格功能同样被忽略,刘少现在用的懿古今的Nana主题,就没有表格功能,没办法,只能自己修改了。

今天分享给大家的是一套可以通用的自适应表格解决方案,可以让你的wordpress程序主题无论什么版本都立即支持自适应表格。

将编辑器切换到文本模式,并且修改代码中的文字内容。

<h3>自适应表格</h3>
<div class="table-r">
<table width="100%">
    <tbody>
        <tr>
            <td width="50%">自适应表格</td>
            <td width="50%">输入文字</td>
        </tr>
        <tr>
            <td width="50%">自适应表格</td>
            <td width="50%">输入文字</td>
        </tr>
        <tr>
            <td width="50%">自适应表格</td>
            <td width="50%">输入文字</td>
        </tr>
        <tr>
            <td width="50%">自适应表格</td>
            <td width="50%">输入文字</td>
        </tr>
    </tbody>
</table>
</div>

然后切回到可视化编辑器,或者直接在文本里面修改里面的内容即可~~

当然,以上是一个基础的模块结构,如果想添加更多,多复制几组代码即可:

自适应表格 输入文字

提示的示例为两栏自适应表格,如需多栏自适应表格,需要将代码中的“50%”修改成3栏“33.33%”或着四栏修改成“25%”等。以此类推。

如果想让表格内的文字居中对齐,需要在wordpress主题的style样式表中添加以下样式,达成居中效果。

.table-r td{
    text-align: center;
}
本文地址:https://www.ezliushao.com/92.html
加入我们:请加入刘少技术博客交流群:扫描二维码刘少技术博客的QQ交流群 | 浪子丶刘少 QQ:1150110267(注:微信暂停添加好友)
温馨提示:文章内容系作者个人观点,不代表刘少技术博客对观点赞同或支持。
版权声明:本文为转载文章,来源于 挖主题 ,版权归原作者所有,欢迎分享本文,转载请保留出处!

发表评论


表情