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

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

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

以下面这个表格为例:

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

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

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

<div>周杰伦jay专辑《范特西》专辑曲目</div>

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

<tbody>

<tr>

<th style="text-align: left;">序号</th>

<th style="text-align: left;">曲名</th>

<th style="text-align: left;">作词</th>

<th style="text-align: left;">作曲</th>

<th style="text-align: left;">编曲</th>

</tr>

<tr>

……

</tr>

</tbody>

</table>

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

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

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

<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。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/112646.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • c+ explicit_staticint与int的区别

    c+ explicit_staticint与int的区别C++ explicit关键字详解首先, C++中的explicit关键字只能用于修饰只有一个参数的类构造函数, 它的作用是表明该构造函数是显示的, 而非隐式的, 跟它相对应的另一个关键字是implicit, 意思是隐藏的,类构造函数默认情况下即声明为implicit(隐式).那么显示声明的构造函数和隐式声明的有什么区别呢? 我们来看下面的例子:class CxString // 没有使用…

  • rand()函数的用法[通俗易懂]

    rand()函数的用法[通俗易懂]C++中rand()函数的用法1、rand()不需要参数,它会返回一个从0到最大随机数的任意整数,最大随机数的大小通常是固定的一个大整数。2、如果你要产生0~99这100个整数中的一个随机整数,

  • RCEP是什么协议_常用的隧道协议有哪些

    RCEP是什么协议_常用的隧道协议有哪些本发明涉及通信技术领域,特别是涉及一种对同一隧道下主LSP和HotLSP的识别方法、PCEP协议及计算机存储介质。背景技术:随着软件定义网络(SoftwareDefinedNetwork,SDN)技术的发展,路径计算单元(PathComputationElement,PCE)不仅仅是作为集中算路的服务组件,还可以主动的对已经建立的隧道进行动态规划和调优工作。draft-ietf-pce-…

  • 自定义UIView重写touchesBegan无法响应点击事件的解决方法

    自定义UIView重写touchesBegan无法响应点击事件的解决方法定义一个UIView的子类重写touchesBegan响应点击事件问题是无法响应点击事件解决办法:在didFinishLaunchingWithOptions方法中先设置窗口可见再添加subView

  • windows退出vim

    windows退出vim在普通模式下,用ZZ来保存并退出,用ZQ不保存退出。在插入模式下,先按来回到普通模式,再按ZZ或者ZQ。(注意:ZZ或者ZQ直接按,要大写。)

  • docker技术入门与精通(2020.12笔记总结)

    docker技术入门与精通(2020.12笔记总结)

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号