在WEB页面中根据分辨率自动调整内容宽度，以适应表格宽度
本文演示了，当表格列内的文字过多的时候，会自动根据当前显示器的分辨率进行调整，多余的内容以“...”的形式显示。
用鼠标调整IE浏览器的宽度，查看表格的备注列的内容，就可以看到演示效果。
作者：崔占民
Email:cuizm@163.com
Web:http://www.j2soft.cn/
文件源码可以到我的网站上下载：http://www.j2soft.cn/
演代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自动调整宽度演示</title>
</head>
<body>
本文演示了，当表格列内的文字过多的时候，会自动根据当前显示器的分辨率进行调整，多余的内容以“...”的形式显示。<br>
用鼠标调整IE浏览器的宽度，查看表格的备注列的内容，就可以看到演示效果。<br><br>
<table width="100%" border="1" cellspacing="0" cellpadding="0" style="table-layout:fixed;">
<tr>
<td width="7%" height="25" align="center" valign="middle">序号</td>
<td width="12%" height="25" align="center" valign="middle">姓名</td>
<td width="8%" height="25" align="center" valign="middle">性别</td>
<td width="12%" height="25" align="center" valign="middle">年龄</td>
<td width="61%" height="25" align="center" valign="middle" style="overflow:hidden;text-overflow:ellipsis"><nobr>备注（调整IE宽度，然后观察此列内容后面的...）</nobr></td>
</tr>
<tr>
<td height="25" align="center" valign="middle">1</td>
<td height="25" align="center" valign="middle">张三</td>
<td height="25" align="center" valign="middle">男</td>
<td height="25" align="center" valign="middle">32</td>
<td height="25" align="left" valign="middle" style="overflow:hidden;text-overflow:ellipsis"><nobr>所选内容的摘要：未对当前选定内容应用任何CSS属性。请选择一个带样式的元素，查看应用了哪些CSS属性</nobr></td>
</tr>
<tr>
<td height="25" align="center" valign="middle">2</td>
<td height="25" align="center" valign="middle">李四</td>
<td height="25" align="center" valign="middle">女</td>
<td height="25" align="center" valign="middle">25</td>
<td height="25" align="left" valign="middle" style="overflow:hidden;text-overflow:ellipsis"><nobr>本文演示了，当表格列内的文字过多的时候，会自动根据当前显示器的分辨率进行调整，多余的内容以“...”的形式显示。</nobr></td>
</tr>
<tr>
<td height="25" align="center" valign="middle">3</td>
<td height="25" align="center" valign="middle">王五</td>
<td height="25" align="center" valign="middle">女</td>
<td height="25" align="center" valign="middle">28</td>
<td height="25" align="left" valign="middle" style="overflow:hidden;text-overflow:ellipsis"><nobr>作者：崔占民； EMAIL：cuizm@163.com http://www.j2soft.cn/ 网站上有源码下载，欢迎下载；</nobr></td>
</tr>
<tr>
<td height="25" align="center" valign="middle">4</td>
<td height="25" align="center" valign="middle">赵六</td>
<td height="25" align="center" valign="middle">男</td>
<td height="25" align="center" valign="middle">30</td>
<td height="25" align="left" valign="middle" style="overflow:hidden;text-overflow:ellipsis"><nobr>测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 </nobr></td>
</tr>
<tr>
<td height="25" align="center" valign="middle">5</td>
<td height="25" align="center" valign="middle">刘七</td>
<td height="25" align="center" valign="middle">男</td>
<td height="25" align="center" valign="middle">29</td>
<td height="25" align="left" valign="middle" style="overflow:hidden;text-overflow:ellipsis"><nobr>测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 测试数据 </nobr></td>
</tr>
</table>
</body>
</html>
在WEB页面中根据分辨率自动调整内容宽度，以适应表格宽度相关推荐
- 轻松实现在web页面中直接播放rtsp视频流
轻松实现在web页面中直接播放rtsp视频流 写在前面 实现 介绍 如何使用 准备ffmpeg 运行rtsp2web 参数说明(在 `new RTSP2web` 时,可配置的参数如下): 前端代码 参 ...
- 从此不再为Web页面中的Tooltip烦恼
让Web页面中,不能折行或不希望被折行的文字始终显示在一行,是一种严格的UI风格,毕竟自由的折行会使得表格和整体界面变得很难把握.当然在一行显示不完全时配以省略号在结尾,能很好的提示用户表示语句未结束 ...
- 如何把python可视化到前端_python数据可视化的效果如何在web页面中展示_北京可视化股票...
有什么APP可以展示可视化的任务进度 可视化任务进度软件,使用敬业签,具体可视有事项开始时间,进度及人.还有结束时间以及人员处理速等等,更多功能如下: 1.敬业签是一款功能比较全面的桌面便签软件,分为 ...
- 在html页面中怎么打印区域,javascript打印web页面中指定区域的方法
要实现打印web页面中的指定区域,要做到: 将需要打印的课程表的table放入div标签中,然后指定出需要打印的区域,最后调用window.print打印指定内容. 核心代码: 复制代码 代码示例: ...
- html的页面中嵌入额外的内容,通过Wireshark分析网络钓鱼
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 实验目的通过学习wireshark分析网络钓鱼 实验工具wireshark:Beyond Compare是一个网络封包分 ...
- html右键禁用和web页面中添加加入qq群的方式
需求: html禁用右键,防止定位csspath和xpath,同时需要在web页面中加入添加加入qq群的图标 实现: html禁用右键:利用oncontextmenu <!doctype htm ...
- php 离线 gis,在 Web 页面中使用离线地图
1. 所需工具&插件: 1. MapDownloader (提取码: spx6) 2. 操作: 1. 参考:java离线地图web GIS制作 下载好所需地图瓦片,本文以百度地图/深圳为例 2 ...
- [置顶] 读取pdf并且在web页面中显示
读取pdf并且在web页面中显示 if (System.IO.File.Exists(f)) { Response.ContentType = "applicationpdf"; ...
- uniapp 微信小程序 最近写的两个小程序中都会有，微信分享的设置，每次都在单个页面中写相同的内容，修改很不友好。下面全局分享代码做了记录
最近写的两个小程序中都会有,微信分享的设置,每次都在单个页面中写相同的内容,修改很不友好.下面全局分享代码做了割记录 首先在小程序中配置微信分享,和微信朋友圈, onShareAppMessage, ...
最新文章
- SQL Server系统表sysobjects介绍与使用
- 自动化监控--手动添加itme监控项详解
- （实际开发大数据分析系统）网络爬虫获取数据与销售数据分析系统
- ERP项目需要持续的呵护
- [2012.04.03] Windows Phone 上的汉语拼音以及多音字处理
- 工信部：2020年启动5G商用
- 考勤系统——代码分析datagrid
- delphi 不允许在线程里操作ui怎么办_11款鲜为人知的在线工具，全面而又强大
- Beginning Python chapter 2 Lists and Tuples：1 Indexing and slicing
- 【语音增强】基于matlab匹配滤波器语音识别【含Matlab源码 514期】
- catia保存成stp文件时部件丢失_超详细的分布式文件系统FastDFS磁盘恢复介绍
- 电信接入点服务器修改,修改apn加快电信4g网速(电信最佳apn接入点)
- 专业邮件群发软件,助您轻松邮件营销
- 深圳车牌识别助力汽车检测，颠覆传统方式
- Gradle配置及同一应用不同版本配置不同资源文件，不同签名，包名进行打包
- android 嵌套分组拖动_Android ExpandableListView双层嵌套实现三级树形菜单
- 利用评论信息的推荐综述
- 读书有益——》民间治咳偏方
- 【翻译】和麻美学姐一起的世界树（マミさんと世界樹スレ）第二话
- java面试题总结及答案,使用/教程/实例