css table 内容溢出省略号用title提示全部内容

最新推荐文章于 2024-04-19 20:39:07 发布

霹雳xiao虾

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量928

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/u013357165/article/details/104049107

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

- 1.先上效果图
- 2.源码

1.先上效果图

效果图1

2.源码

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
 $(document).ready(function(){
  $("th").mouseover(function(){
   var cnt = $(this).text(); 		/*获取th标签里的内容cnt,设置title的内容为cnt*/
   $(this).attr("title",cnt);
  });
 $("td").mouseover(function(){
   var cnt = $(this).text(); 		/*获取th标签里的内容cnt,设置title的内容为cnt*/
   $(this).attr("title",cnt);
  });
 
 });

</script>
<style type="text/css">
table{
	width:400px;
	height:200px;
	border-color:red;
	table-layout:fixed;		/*固定宽高，表格不会变形*/
}
table th{
	width:200px;
	height:100px;
	border-color:red;
	white-space: nowrap;	/*内容不要换行,换行的话div会被撑开变高*/
	text-overflow:ellipsis;	/*内容溢出用省略号表示*/
	overflow:hidden;		/*内容溢出不会出现滚动条*/
}
table td{
	width:200px;
	height:50px;
	border-color:red;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}

</style>
</head>
<body>
<div>
	<table border="1" cellspacing="0" cellpadding="0" >
		<tr><th>宽200，高100</th><th>整个表格  都有边框，直接在table上设置border="1" cellspacing="0" cellpadding="0".看看这里是不是用省略号代替了呢？？？？？看看这里是不是用省略号代替了呢？？？？？看看这里是不是用省略号代替了呢？？？？？</th></tr>
		<tr><td>宽200，高50</td><td>222</td></tr>
		<tr><td>111</td><td>使用省略号代替省略的内容，鼠标悬置会用title的形式展示出来;使用省略号代替省略的内容，鼠标悬置会用title的形式展示出来;</td></tr>
	</table>
</div>
</body>
</html>

霹雳xiao虾

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css table 内容溢出省略号用title提示全部内容

文章目录1.先上效果图2.源码1.先上效果图2.源码<!DOCTYPE html><html><head><script src="jquery.js"></script><script> $(document).ready(function(){ $("th").mouseover(function(...
复制链接

扫一扫