table内容超出宽度时隐藏并显示省略标记


HTML中,一个表格,要达到二个条件:

1、内容多了不自动换行;

2、固定单元格宽度。如果内容超出,则隐藏;

如 果在IE下,只是写成<table style="table-layout:fixed; overflow:hidden;"><tr><td nowrap>则可,而在FF下则不行。兼容IE和FF的写法,应该为:<table style="table-layout:fixed;"><tr>td style="overflow:hidden;" nowrap>

3、显示省略标记,只支持IE:

text-overflow:ellipsis;

测试代码:

<style>.tbl {table-layout:fixed}.td {overflow:hidden;text-overflow:ellipsis}</style>

<table class="tbl" border=1 width=80>

<tr>

    <td width=25% class="td" nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>

    <td class="td" nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>

</tr>

</table>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM