您现在的位置： 雨哲在线 >> 文章教程 >> Web开发 >> HtmlCss >> 查看文章内容

文字自动适应Table(表格)宽度

【字体：小 大】    热 荐  ★★★ 作者：佚名    文章来源：pjhome.net    点击数：1244    更新时间：2007-05-29    阅读点数：0点

载入中

以下的例子是用样式实现，文字自动适应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>

<style>
 .ctl{
   table-layout:fixed
 }
  .ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}
</style>
</HEAD>

<BODY>
 <table cellSpacing="0" cellpadding="1" width="100%" class="ctl" border=1>
  <colgroup>
   <col>
   <col width="60">
  </colgroup>
  <tBody>
   <tr>
  <td>标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻</td>
  <td>(1/1)</td>
   </tr>
    <tr>
  <td>标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻</td>
  <td>(1/1)</td>
   </tr>
   <tr>
  <td>标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻</td>
  <td>(1/1)</td>
   </tr>
   <tr>
  <td>标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻</td>
  <td>(1/1)</td>
   </tr>
 </tBody>
 </table>
</BODY>
</HTML>

 

原文：http://www.pjhome.net/article.asp?id=550

文章来源:YuZhe.Name

本文短地址：http://www.yz81.com/?ArticleID=1933 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】
文章搜索：
[更多]
网友看法
    数据载入中，请稍后……
    发表评论
    昵　称: 邮　箱:
    评　分:
    内　容:
    （0/5000）
    插入链接
    验证码:

    雨哲提示：Alt+S快速发表
用户信息中心
与本文章相关内容
文章归档
2008年一月三月四月五月六月七月八月九月十月十一月2007年一月二月三月四月五月六月七月八月九月十月十一月十二月2006年十二月
热门排行TOP10
推荐排行TOP10
广告位招商QQ:425162221