怎么让WordPress文章页表格(table)和文字都自适应宽度?

admin 2019年11月16日10:38:08 评论 338

如何在WordPress文章页设置表格(table)自适应宽度,保持表格中内容不撑破列宽,使页面更加整齐、美观,完美实现自适应,不管你什么版本的主题模板都支持自适应表格。
注意,添加表格时需要把编辑器默认切换到文本模式,并且修改代码中的文字内容。

正确的(自适应宽度)案例代码如下:

此处为隐藏的内容!
发表评论并刷新,方可查看

案例代码分析

可以看到上面代码中关于定义table(表格)属性的代码是(重点):

<table style="table-layout: fixed;" border="1" width="100%" cellspacing="0" cellpadding="2">

参数解析:border—表格的线宽为1;cellspacing—表格内数据与表格间隔为0;cellpadding—单元格与单元格间隔为2。

这样就可以实现表格自适应了,但是有个问题里面的文字会自动换行,导致高度发生变化,也不是很好看。

还有一种办法就是给文字也加上自适应,不过上面的代码就不适用了,如果要实现文字和表格都自适应可以用下面的代码:

<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样式表中添加以下样式,达成居中效果。

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

 

admin

发表评论

您必须才能发表评论!