项目中遇到如果表格内容太多的话页面会很丑,所以想到给表格一个最大宽度之类的,当内容超出时用三个点代替超出的部分,当鼠标悬停时显示全部的信息,下面百度到两个案例,都可以实现:
1.在表格下面在添加一模一样的一行,先将其隐藏,等鼠标悬停时在显示
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table {width: 100%;table-layout:fixed;}
table tr {line-height: 25px;}
table td {text-align:center;}
.MHover{ white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor: pointer;}
.MALL{padding:10px;border-radius: 5px;background: #B4CBED;}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<th>姓名</th>
<th>个性签名</th>
<th>性别</th>
</tr>
<tr>
<td>张国荣</td>
<td>
<div class="MHover">我就是我,是颜色不一样的烟火!</div>
<div class="MALL">我就是我,是颜色不一样的烟火!</div>
</td>
<td>男</td>
</tr>
</table>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
// 表格内容超出,三个点,鼠标悬停显示
$(document).ready(function () {
$(".MALL").hide();
console.log($('.MALL'));
$(".MHover").mouseover(function (e) {
$(this).next(".MALL").css({"position":"absolute","top":e.pageY+20,"left":e.pageX+20}).show();
});
$(".MHover").mousemove(function (e) {
$(this).next(".MALL").css({ "color": "#fff", "position": "absolute", "opacity": "0.7", "top": e.pageY + 20, "left": e.pageX + 20});
});
$(".MHover").mouseout(function () {
$(this).next(".MALL").hide();
});
});
</script>
</html>
2.不需要写重复的一行
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>表格内容溢出省略号显示</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/layer.js"></script>
<style type="text/css">
.contain { width:900px; margin: 15px auto; font-family: ‘Microsoft YaHei’; }
table { width:100%; text-align: center; border:1px solid #e3e6e8; border-collapse: collapse; table-layout: fixed;display: table; }
th,td { border: 1px solid #e3e6e8; height:38px; line-height: 38px; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; }
th { background-color: #189AD6; color:#fff; }
.layui-layer { word-wrap: break-word; }
</style>
</head>
<body>
<div class="contain">
<table>
<thead>
<th>货币</th>
<th>本周收盘</th>
<th>上周收盘</th>
<th>涨跌</th>
<th>幅度</th>
</thead>
<tbody>
<tr>
<td>EURGBPfffffffffffffffffffffffffffffffffffffffffffffffffffffff</td>
<td>0.86333333333393</td>
<td>0.88945555555555555553</td>
<td>-2033333333333333331</td>
<td>-2.3166%</td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
$(function () {
$("td").on("mouseenter",function() {
if (this.offsetWidth < this.scrollWidth) {
var that = this;
var text = $(this).text();
console.log(text);
layer.tips(text, that,{
tips: 1,
time: 2000
});
}
});
})
</script>
</html>