我的思想随着这些闪耀的绿叶而闪耀;我的心灵因了这日光的抚触而歌唱;

在文章页面如何设置table(表格)自适应宽度[移动端]

技术专栏 致远 110℃ 0评论

我们在wordpress文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率设备上却经常撑破列宽,很是影响美观和客户体验。这里就这个问题分享一下解决的方法。

以下面这个表格为例:

在文章页面如何设置table(表格)自适应宽度[移动端]

表格范例-周杰伦jay专辑《范特西》专辑曲目

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

  1. <div>周杰伦jay专辑《范特西》专辑曲目</div>
  2. <table style=“table-layout: fixed;” border=“1” width=“100%” cellspacing=“0” cellpadding=“2”>
  3. <tbody>
  4. <tr>
  5. <th style=“text-align: left;”>序号</th>
  6. <th style=“text-align: left;”>曲名</th>
  7. <th style=“text-align: left;”>作词</th>
  8. <th style=“text-align: left;”>作曲</th>
  9. <th style=“text-align: left;”>编曲</th>
  10. </tr>
  11. <tr>
  12. ……
  13. </tr>
  14. </tbody>
  15. </table>

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

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

经常见到的非自适应宽度的代码,也就是在移动端会撑破列宽的代码则是:

  1. <table style=“height: 125px;” border=“1” width=“640” cellspacing=“0” cellpadding=“2”>

看出来区别没有,关于style和width的设置不一样!

总结:在定义表格时,width(整个表格的宽度)不要设置为固定数值,定义为百分比类型,例如90%或者95%;再追加style=”table-layout:fixed;”,这样做可以使半角连续字符强制换行,不至于撑破列宽。需要注意的是,使用此参数后,不要轻易在tr(行)或td(列)中加入height属性,会使table不再被内容撑出适合的高度。做到这两点之后,你table(表格)在任何情况下都可以很好的自适应宽度显示了。

补充一下,上面定义table(表格)参数的意思,border:表格的线宽为1;cellspacing:表格内数据与表格间隔为0;cellpadding:单元格与单元格间隔为2。

转载请注明:致远博客 » 在文章页面如何设置table(表格)自适应宽度[移动端]

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址