WordPress网站table表格自适应微信方法

WordPress网站table表格自适应微信方法【WordPress网站table表格自适应微信方法】使用WordPress程序搭建的网站,博主在插入表格的时候发现并不能在手机端自适应,界面宽度被撑开,体验非常差,为此,这里分享下WordPress网站table表格自适应手机方法,供需要的同学参考,这里先来看一张图:

WordPress网站table表格自适应微信方法


WordPress网站table表格自适应微信方法


如上图所示,该样式是经过处理了并且可以自适应手机端的,附上代码如下:
<table style="table-layout: fixed;" border="1" width="100%" cellspacing="0" cellpadding="2"><tbody><tr bgcolor="#ffffff"><td width="25%">郁润</td><td width="25%">郁腻</td><td width="25%">郁滃</td><td width="25%">郁蒙</td></tr><tr bgcolor="#ffffff"><td width="25%">郁蓊</td><td width="25%">郁弥</td><td width="25%">郁盘</td><td width="25%">郁浥</td></tr></tbody></table>从上面可以看到关于定义table(表格)属性的代码是:
<table style="table-layout: fixed;" border="1" width="100%" cellspacing="0" cellpadding="2">很多table表格并不能很好自适应手机端,是因为定义了width="640"之类的这种,因为定义了宽度就是写死了宽度,而采用width="100%"这种百分比的形式则可以根据界面自适应处理,再追加style="table-layout:fixed;",这样做可以使半角连续字符强制换行,不至于撑破列宽 。

    推荐阅读