WordPress文章中添加自适应表格。前几天小伙伴问我怎么在网站中添加自适应表格。在网上寻找到这么个代码,给了他。这会儿想了想,还是收集到自己网站,下次自己需要使用的时候可以快速找到了。编辑文章切换到文本编辑模式,将下面代码添加进去,并修改其中的文字:<h3>自适应表格</h3><div…
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;}
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)