css操作,table的td标签鼠标移入自动显示全部的td,td会自动换行

tiger_angel

于 2018-06-11 11:09:13 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # jsp个人笔记

本文链接：https://blog.youkuaiyun.com/qq_38567039/article/details/80649096

jsp个人笔记专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用CSS实现固定布局表格的方法，并展示了如何通过设置特定样式使表格单元格在默认情况下显示省略号，当鼠标悬停时则完整显示内容。这种方法适用于需要节省空间同时又不希望牺牲过多信息展示的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

id为table上的id

<style type="text/css">
 #table_report {
	table-layout: fixed;
	width: 98% border:0px;
	margin: 0px;
}

#table_report tr td {
	text-overflow: ellipsis; /* for IE */
	-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
	overflow: hidden;
	white-space: nowrap;
	text-align: left
}


#table_report tr td:hover {
	overflow: visible;
	white-space: normal;
	word-wrap: break-word;
} 
</style>

效果: 前

鼠标移入后