WordPress文章中添加自适应表格

2018年11月24日22:17:38 发表评论 阅读286次

 

WordPress文章中添加自适应表格

如何在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>

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

<tr>
    <td width="50%">自适应表格</td>
    <td width="50%">输入文字</td>
</tr>

 

效果如下:

 

自适应表格

自适应表格 输入文字
自适应表格 输入文字
自适应表格 输入文字
自适应表格 输入文字

 

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

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

.table-r td{
    text-align: center;
}

 

 

 

MissLover
广告也精彩

发表评论

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