css table 内容溢出 省略号 用title提示全部内容
程序员文章站
2022-04-29 12:29:04
...
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>