HTML中如何让table自适应宽度,代码是什么
Admin 2022-06-17 群英技术资讯 712 次浏览
WEB应用的页面,表格的表现形式是常常遇到的,在列数有限的前提下,如何将各列中的内容自适应到不同分辨率的屏幕,这应该是一个比较容易遇到的问题,下面就来谈一谈我对这类问题的解决与看法。 将所有列设置为固定宽度,显然是不能满足此类要求的,但是若把全部的列都设置为百分比,恐怕在某些尺寸,或分辨率下,会变得很难看。比较习惯于用如下的方式来处理——在表格列数不是很多的前提下——将大部分列宽用固定值设置死,留下一列不设置宽度,将table的宽度设置为屏幕的百分比(譬如95%、98%等)。
例:
<table width="95%" border="1" cellpadding="2" cellspacing="1"> <tr> <td width="50px" nowrap>序号</td> <td width="150px" nowrap>分类A</td> <td width="150px" nowrap>分类B</td> <td width="200px" nowrap>名称</td> <td nowrap>说明</td> <td width="100px" nowrap>操作</td> </tr> …… </table>
在本例中,名为“说明”的列,内容比较长,个人认为可以将此列设置为浮动宽度列,用以自适应页面的宽度。
但是当该表格中出现长度比列幅宽的半角字符时,td的宽度会被内容撑破,应该如何解决呢?
解决此问题的方法是:在明细行的td中,追加style="word-wrap:break-word;",这样做可以使半角连续字符强制换行,不至于撑破列宽。
例:
<td align="left" width="150px" style="word-wrap:break-word;"> …… </td>
应用此方法,针对设置了width宽度的td列可以解决,但是如果没有设置宽度的td列,是无法生效还是会被撑破td的,应该如何解决呢?
解决此问题的方法是:在定义表格时,追加style="table-layout:fixed;",这样做可以使半角连续字符强制换行,不至于撑破列宽。需要注意的是,使用此参数后,不要轻易在tr(行)或td(列)中加入height属性,会使table不再被内容撑出适合的高度。
例:
<table width="95%" border="1" cellpadding="2" cellspacing="1" style="table-layout:fixed;"> …… </table>
此方法适用于IE与FireFox浏览器。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
三列布局是比较常见的布局,这篇文章给大家分享用CSS实现三列布局中间自适应的效果,也就是两列固定与一列自适应,小编觉得挺实用的,因此分享给大家做个参考,文中示例代码介绍的很详细,感兴趣的朋友接下来一起跟随小编看看吧。
前言Q:如果多个规则匹配同一个元素,而且部分声明之间有冲突,那么我们如何知道哪个规则胜出呢?A:用户代理会计算每个规则中选择符的特指度,然后将其依附到规则中的每个声明上。如果
css3动画实现方式有多少种?css3动画实现的方式有三种,分别是transition 实现渐变动画、 transform 转变动画、animation 实现自定义动画。接下来我们就来看看这三种方式的实现。
CSS框架开发有什么优点呢?有不少朋友对此感兴趣,下面小编给大家整理和分享了相关知识和资料,易于大家学习和理解,有需要的朋友可以借鉴参考,下面我们一起来了解一下吧。
这篇文章主要介绍了uni-app项目瀑布流布局的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008