主机镇
主机测评网

给WordPress添加自适应表格 让表格自适应屏幕

文章目录

wordpress自带的表格不能自适应屏幕宽带,每次新建了表格,电脑上显示正常的,结果换到手机上就超出屏幕宽度了,很麻烦,更重要的是很不美观,本次我就问为大家带来一个添加自适应表格的教程。

案列分析

我们可以看到代码中关于定义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;
}
赞(0) 夸赞
声明:
1、本博客不从事任何主机及服务器租赁业务,不参与任何交易,也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动,信息均摘自网络或来自服务商主动提供;所以对本博客提及的内容不作直接、间接、法定、约定的保证,博客内容也不具备任何参考价值及引导作用,访问者需自行甄别。

2、访问本博客请务必遵守有关互联网的相关法律、规定与规则;不能利用本博客所提及的内容从事任何违法、违规操作;否则造成的一切后果由访问者自行承担。

3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。

4、一旦您访问本博客,即表示您已经知晓并接受了以上声明通告。

文章名称:《给WordPress添加自适应表格 让表格自适应屏幕》
文章链接:https://www.zhujiz.com/64.html

夸赞作者,增加更新动力

非常感谢你的夸赞,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫

登录

找回密码

注册