WordPress网站table表格自适应手机方法

共计 743 个字符，预计需要花费 2 分钟才能阅读完成。

使用 WordPress 程序搭建的网站，博主在插入表格的时候发现并不能在手机端自适应，界面宽度被撑开，体验非常差，为此，这里分享下 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;”，这样做可以使半角连续字符强制换行，不至于撑破列宽。