让文字自动适应Table宽度

互联网 Alixixi 2009-06-16 点击： 1 我要评论

用CSS实现，文字自动适应Table的宽度，并且超出的宽度的文字自动隐藏。IE下面还可以自动出现...的省略符号。

用CSS实现，文字自动适应Table的宽度，并且超出的宽度的文字自动隐藏。IE下面还可以自动出现...的省略符号。
所用到的样式:

程序代码
.ctl{
table-layout:fixed
}
.ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}

说明：
table-layout:fixed 固定布局的算法,则表格被呈递的默认宽度为 100% (For IE,Mozilla)
text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...) (For IE)
overflow:hidden 不显示超过对象尺寸的内容 (For IE,Mozilla)
white-space: nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象 (For IE,Mozilla)
==========
下面是一个具体的例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<BODY>
<table cellSpacing="0" cellpadding="1" width="100%" class="ctl" border=1>
<colgroup>
<col>
<col width="60">
</colgroup>
<tBody>
<tr>
<td>corange.cn Corange的杂乱记事
ASP,PHP,JSP,JS,ASP.NET,DIV,CSS等网站建设相关技术</td>
<td>(1/1)</td>
</tr>
<tr>
<td>corange.cn Corange的杂乱记事
ASP,PHP,JSP,JS,ASP.NET,DIV,CSS等网站建设相关技术corange.cn Corange的杂乱记事
ASP,PHP,JSP,JS,ASP.NET,DIV,CSS等网站建设相关技术</td>
<td>(1/1)</td>
</tr>
<tr>
<td>corange.cn Corange的杂乱记事
ASP,PHP,JSP,JS,ASP.NET,DIV,CSS等网站建设相关技术</td>
<td>(1/1)</td>
</tr>
<tr>
<td>corange.cn Corange的杂乱记事
ASP,PHP,JSP,JS,ASP.NET,DIV,CSS等网站建设相关技术</td>
<td>(1/1)</td>
</tr>
</tBody>
</table>
</BODY>
</HTML>

更多关于 HTML初级教程的文章

·上一篇：HTML相对路径－－上级目录及下级目录的写法
·下一篇：Flash广告记忆效果代码

相关排行总榜

网页教程

站长文章

让文字自动适应Table宽度

分类热门文章