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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值