html表格单元格内容超出时显示省略号效果

　　说明

　　在前端开发中，经常会遇到需要限制单元格宽度并且内容超出部分显示省略号的的情况。下面就简单的介绍下如何达到这种效果。

　　准备知识

　　1.控制文本不换行

　　white-space:nowrap;

　　2.超出长度时，出现省略号

　　overflow:hidden;

　　text-overflow:ellipsis

　　3.修改表格布局算法

　　table-layout:fixed;table-layout的默认值为automatic，意思是列宽度由单元格内容设定。而fixed意思是列宽由表格宽度和列宽度设定。

　　也就是说当你给表格设定列宽时，实际情况是不起作用的，当单元格内容过多时，依然会把宽度撑开。如果需要让表格的列宽显示方式由自己给单元格定义的列宽决定，就必须使用fixed这个值。

　　注意：1、表格必须设置宽度2、如果只设置表格宽度，而不设置列宽度的话，列的宽度会平均分配。

　　代码演示

　　如下代码所示，表格中安排了姓名、年龄、性别以及地址四列，这几个列的长度分别为10%、20%、30%、40%。

　　XML/HTMLCode复制内容到剪贴板

　　<!doctypehtml>

　　<htmllang="en">

　　<head>

　　<metacharset="UTF-8"/>

　　<styletype="text/css">

　　table{

　　width:100%;

　　table-layout:fixed;

　　}

　　.name{

　　width:10%;

　　}

　　.age{

　　width:20%;

　　}

　　.sex{

　　width:30%;

　　}

　　.addr{

　　width:40%;

　　}

　　</style>

　　</head>

　　<body>

　　<tableborder="1"cellspacing="0"cellpadding="0">

　　<thead>

　　<tr>

　　<thclass="name">姓名</th>

　　<thclass="age">年龄</th>

　　<thclass="sex">性别</th>

　　<thclass="addr">地址</th>

　　</tr>

　　</thead>

　　<tbody>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　</tbody>

　　</table>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h55013.shtml