本文演示了,当表格列内的文字过多的时候,会自动根据当前显示器的分辨率进行调整,多余的内容以“...”的形式显示。
用鼠标调整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>