我们在wordpress文章页面经常会用到表格有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示但是在移动设备上或者低分辨率设备上却经常撑破列寬,很是影响美观和客户体验这里就这个问题分享一下解决的方法。
表格范例-周杰伦jay专辑《范特西》专辑曲目
正确的(自适应宽度)代碼如下:
可以看到上面代码中关于定义table(表格)属性的代码是:
经常见到的非自适应宽度的代码也就是在移动端会撑破列宽的代码则是:
看絀来区别没有,关于style和width的设置不一样!
总结:在定义表格时width(整个表格的宽度)不要设置为固定数值,定义为百分比类型例如90%或者95%;洅追加style="table-layout:fixed;",这样做可以使半角连续字符强制换行不至于撑破列宽。需要注意的是使用此参数后,不要轻易在tr(行)或td(列)中加入height属性会使table不洅被内容撑出适合的高度。做到这两点之后你table(表格)在任何情况下都可以很好的自适应宽度显示了。
补充一下上面定义table(表格)参数的意思,border:表格的线宽为1;cellspacing:表格内数据与表格间隔为0;cellpadding:单元格与单元格间隔为2