在IE下效果很好，固定td的宽度，超出部分截断用...显示，鼠标悬停有截断的则显示其完整的title。firefox不支持，只有截断的效果，无鼠标悬停效果，也没有...
几点说明的，table一定要带table-layout:fixed;样式，否则无效果。固定table的话就带此样式，还能增加显示速度。需要截断的td加上下面的ssss样式，并且td的内容放在div里面，div带'white-space:nowrap样式限制换行。想想怎么兼容firefox，想到了再来补充。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<style type="text/css">
.ssss{ overflow:hidden;text-overflow:ellipsis;}
.ListTable {border-collapse:collapse;border:1px solid silver;width:700px;font-size:12px;text-align:center;table-layout:fixed;}
.ListTable th{line-height:20px;border:1px solid silver;border-style:solid;}
.ListTable td{border:1px solid silver;}
</style>
</head>
<body>
<form name="form1" method="post" action="Bxpjml_Manage.aspx" id="form1">
<table class="ListTable" cellspacing="0" cellpadding="0">
<tr style="color:#404040;background-color:#A6CBEF;border-color:#A6CBEF;font-weight:bold;">
<th scope="col" style="width:20px;"><input id='Checkbox1' type='checkbox' οnclick='selectAll(this)' /></th><th scope="col" style="width:40px;">操作</th><th scope="col" style="width:60px;">标识标记</th><th scope="col" style="width:60px;">产品代码</th><th scope="col" style="width:180px;">产品名称</th><th scope="col">产品型号</th><th scope="col">保修金额</th><th scope="col">重量</th><th scope="col">产品产地</th>
</tr><tr>
<td>
<input id="GridView1_ctl02_CheckBox1" type="checkbox" name="GridView1$ctl02$CheckBox1" />
</td><td><a href="bxpjml.aspx?cpdm=101468&type=modify" target="_self">编辑</a></td><td><a href="showImage.aspx?cpdm=101468" target="_blank">查看</a></td><td>101468</td><td class="ssss" align="left"><div style='white-space:nowrap;' title='' οnmοuseοver='changeTitle(this)'>顶盖带衬套总成顶盖带衬套总成顶盖带衬套总成</div></td><td class="ssss" align="left"><div style='white-space:nowrap;' title='' οnmοuseοver='changeTitle(this)'>1700BY-3021700BY-3021700BY-302</div></td><td align="left">47.38</td><td align="left"> </td><td>01X </td>
</tr><tr>
<td>
<input id="GridView1_ctl03_CheckBox1" type="checkbox" name="GridView1$ctl03$CheckBox1" />
</td><td><a href="bxpjml.aspx?cpdm=101470&type=modify" target="_self">编辑</a></td><td><a href="showImage.aspx?cpdm=101470" target="_blank">查看</a></td><td>101470</td><td class="ssss" align="left"><div style='white-space:nowrap;' title='' οnmοuseοver='changeTitle(this)'>倒档检查孔盖板 </div></td><td class="ssss" align="left"><div style='white-space:nowrap;' title='' οnmοuseοver='changeTitle(this)'>1700C-028 </div></td><td align="left">5.50</td><td align="left"> </td><td>0S1 </td>
</tr><tr>
<td>
<input id="GridView1_ctl04_CheckBox1" type="checkbox" name="GridView1$ctl04$CheckBox1" />
</td><td><a href="bxpjml.aspx?cpdm=101472&type=modify" target="_self">编辑</a></td><td><a href="showImage.aspx?cpdm=101472" target="_blank">查看</a></td><td>101472</td><td class="ssss" align="left"><div style='white-space:nowrap;' title='' οnmοuseοver='changeTitle(this)'>变速箱第一轴 </div></td><td class="ssss" align="left"><div style='white-space:nowrap;' title='' οnmοuseοver='changeTitle(this)'>1700C-031 </div></td><td align="left">78.63</td><td align="left"> </td><td>059 </td>
</tr><tr>
<td>
<input id="GridView1_ctl05_CheckBox1" type="checkbox" name="GridView1$ctl05$CheckBox1" />
</td><td><a href="bxpjml.aspx?cpdm=101473&type=modify" target="_self">编辑</a></td><td><a href="showImage.aspx?cpdm=101473" target="_blank">查看</a></td><td>101473</td><td class="ssss" align="left"><div style='white-space:nowrap;' title='' οnmοuseοver='changeTitle(this)'>第一轴承盖(号取消) </div></td><td class="ssss" align="left"><div style='white-space:nowrap;' title='' οnmοuseοver='changeTitle(this)'>1700C-041 </div></td><td align="left">20.33</td><td align="left"> </td><td>059 </td>
</tr><tr>
<td>
<input id="GridView1_ctl06_CheckBox1" type="checkbox" name="GridView1$ctl06$CheckBox1" />
</td><td><a href="bxpjml.aspx?cpdm=101475&type=modify" target="_self">编辑</a></td><td><a href="showImage.aspx?cpdm=101475" target="_blank">查看</a></td><td>101475</td><td class="ssss" align="left"><div style='white-space:nowrap;' title='' οnmοuseοver='changeTitle(this)'>中间轴隔套 </div></td><td class="ssss" align="left"><div style='white-space:nowrap;' title='' οnmοuseοver='changeTitle(this)'>1700C-047 </div></td><td align="left">3.84</td><td align="left"> </td><td>059 </td>
</tr><tr>
<td>
<input id="GridView1_ctl07_CheckBox1" type="checkbox" name="GridView1$ctl07$CheckBox1" />
</td><td><a href="bxpjml.aspx?cpdm=101476&type=modify" target="_self">编辑</a></td><td><a href="showImage.aspx?cpdm=101476" target="_blank">查看</a></td><td>101476</td><td class="ssss" align="left"><div style='white-space:nowrap;' title='' οnmοuseοver='changeTitle(this)'>变速箱中间轴 </div></td><td class="ssss" align="left"><div style='white-space:nowrap;' title='' οnmοuseοver='changeTitle(this)'>1700C-048-D </div></td><td align="left">109.66</td><td align="left"> </td><td>059 </td>
</tr>
</table>
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">
function changeTitle(obj){
if(obj.offsetWidth>obj.parentNode.offsetWidth)
obj.title=obj.innerText;
else
obj.title="";
}
</script>
----------------
FF下obj.offsetWidth始终比obj.parentNode.offsetWidth小1px，郁闷，IE下内容会把div的obj.offsetWidth撑开。
2476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
