<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
< HTML >
< HEAD >
< TITLE > New Document </ TITLE >
< style > ...
.auto_arrange{...}{ table-layout:fixed }
.auto_arrange td{...}{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}
</ style >
</ HEAD >
< BODY >
< table cellSpacing ="0" cellpadding ="1" width ="100%" class ="auto_arrange" border =1 >
< tr >
< td > 让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度 </ td >
< td width ="54" > (1/4) </ td >
</ tr >
< tr >
< td > 让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度 </ td >
< td width ="54" > (2/4) </ td >
</ tr >
< tr >
< td > 让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度 </ td >
< td width ="54" > (3/4) </ td >
</ tr >
< tr >
< td > 让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度 </ td >
< td width ="54" > (4/4) </ td >
</ tr >
</ table >
</ BODY >
</ HTML >
< HTML >
< HEAD >
< TITLE > New Document </ TITLE >
< style > ...
.auto_arrange{...}{ table-layout:fixed }
.auto_arrange td{...}{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}
</ style >
</ HEAD >
< BODY >
< table cellSpacing ="0" cellpadding ="1" width ="100%" class ="auto_arrange" border =1 >
< tr >
< td > 让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度 </ td >
< td width ="54" > (1/4) </ td >
</ tr >
< tr >
< td > 让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度 </ td >
< td width ="54" > (2/4) </ td >
</ tr >
< tr >
< td > 让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度 </ td >
< td width ="54" > (3/4) </ td >
</ tr >
< tr >
< td > 让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度 </ td >
< td width ="54" > (4/4) </ td >
</ tr >
</ table >
</ BODY >
</ HTML >
以上的例子是用样式实现,文字自动适应Table的宽度,并且超出的宽度的文字自动隐藏。IE下面还可以自动出现...的省略符号.
关键样式:
table-layout:fixed 固定布局的算法,则表格被呈递的默认宽度为 100% (For IE,Mozilla)
text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...) (For IE)
overflow:hidden 不显示超过对象尺寸的内容 (For IE,Mozilla)
white-space: nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 (For IE,Mozilla)