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

91次阅读
没有评论

共计 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;”,这样做可以使半角连续字符强制换行,不至于撑破列宽。

正文完
 
丸趣
版权声明:本站原创文章,由 丸趣 2023-06-03发表,共计743字。
转载说明:除特殊说明外本站除技术相关以外文章皆由网络搜集发布,转载请注明出处。
评论(没有评论)