td设置自动隐藏,hover事件触发全部显示,table列表不用担心信息太长导致界面不美观

table由于部分列信息较长,导致界面十分不友好,设置成固定布局的话,每列的占用宽度被均化了,可以把多点内容隐藏掉,但是也不是很美观,可以加div来调整,其他相关设置列属性好像也可以,没有尝试过。

通过给td加上以下属性,可以适应自定义的列宽度,多余的内容隐藏,鼠标移动到列上可以全部显示,比较合理。

table tr td{ 
max-width:500px; 
word-wrap:
break-word; 
text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden; 
}
table tr td:hover{ 
white-space:normal; 
overflow:auto;
}
发布了92 篇原创文章 · 获赞 13 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/qq_41885819/article/details/103563983