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

文章目录

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

Alt

1.先上效果图

css table 内容溢出 省略号 用title提示全部内容_第1张图片

2.源码


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

你可能感兴趣的:(前端)