如何能够让文字自动适应表格宽度?
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE>NewDocument</TITLE>
<style>
.auto_arrange{table-layout:fixed}
.auto_arrangetd{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:2px}
</style>
</HEAD>
<BODY>
<tablecellSpacing="0"cellpadding="1"width="100%"class="auto_arrange"border=1>
<tr>
<td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>
<tdwidth="54">(1/4)</td>
</tr>
<tr>
<td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>
<tdwidth="54">(2/4)</td>
</tr>
<tr>
<td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>
<tdwidth="54">(3/4)</td>
</tr>
<tr>
<td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>
<tdwidth="54">(4/4)</td>
</tr>
</table>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>NewDocument</TITLE>
<style>
.auto_arrange{table-layout:fixed}
.auto_arrangetd{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:2px}
</style>
</HEAD>
<BODY>
<tablecellSpacing="0"cellpadding="1"width="100%"class="auto_arrange"border=1>
<tr>
<td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>
<tdwidth="54">(1/4)</td>
</tr>
<tr>
<td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>
<tdwidth="54">(2/4)</td>
</tr>
<tr>
<td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>
<tdwidth="54">(3/4)</td>
</tr>
<tr>
<td>让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度让文字自动适应Table宽度</td>
<tdwidth="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)
本文地址:http://www.45fan.com/dnjc/71246.html