table表格内容过长设置超出隐藏方法

5月/31日


切图网(qietu.com)是国内专业的web前端外包服务提供商,在做前端项目的时候,虽然table在布局中早已经被div替代,但是做数据表格的时候table依然是无可替代的,在后台、前台页面中都有会用到table的时候,那么就会产生一个问题,当td单元格数据过长的时候,如果做到超出显示省略号?

具体代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<style type=”text/css”>
.mytable {
table-layout: fixed;
width: 98% border:0px;
margin: 0px;
}

.mytable tr td {
text-overflow: ellipsis; /* for IE */
-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
overflow: hidden;
white-space: nowrap;
border: 1px solid;
text-align: left
}
</style>
</head>
<body>
<table width=”500px” class=”mytable”>
<tr>
<td width=”20%”>测试</td>
<td width=”80%”>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试123123</td>
</tr>
</table>
</body>
</html>

table的width一定要设置, 不然会出现文字太多时变形的情况.

注释:
原理:
本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式:

table-layout: fixed 由于table-layout的默认值是auto,即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了,fixed一下就好了。(注意:此样式是关键)

white-space: nowrap 是为了保证无论单元格(TD)中文本内容有多少,都不会自动换行,此时多余的内容会在水平方向撑破单元格。

overflow: hidden 隐藏超出单元格的部分。

text-overflow: ellipsis 将被隐藏的那部分用省略号代替。

兼容性:
Internet Explorer 6, 7, 8, 9及以上版本

FireFox 最新版

Chrome 最新版

切图网始于2007年, 前端外包 服务拓荒者、领航者,提供专业的前端外包服务,微信公众号 qietuwang