怎么设置table(表格)手机端自适应宽度

网友投稿 1272 2022-05-30

IT视频资源分享列表IT视频资源分享列表，分享是一种积极的生活态度！！！https://mp.weixin.qq.com/s/HqeXW1T_Ftx7CI1wvMTPfQ我们在wordpress文章页面经常会用到表格，有些是从其他网页或者文档复制粘贴过来的，在电脑设备网页上都能很好的展示，但是在移动设备上或者低分辨率设备上却经常撑破列宽，很是影响美观和客户体验。这里就这个问题分享一下解决的方法。

以下面这个表格为例：

怎么设置table(表格)手机端自适应宽度

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

正确的（自适应宽度）代码如下：

周杰伦jay专辑《范特西》专辑曲目
……
序号 曲名 作词 作曲 编曲

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

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

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

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

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

视频

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：怎么 设置 Table 在线云表格
上一篇:关于php网络爬虫phpspider
下一篇:一文辨析 Java、JSP、JavaScript
相关文章