項目中遇到如果表格内容太多的話頁面會很醜，是以想到給表格一個最大寬度之類的，當内容超出時用三個點代替超出的部分，當滑鼠懸停時顯示全部的資訊，下面百度到兩個案例，都可以實作：
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>
![可視化需要考慮資料互動性，設計師可以通過添加互動元素來提高使用者的參與度和體驗。例如，添加滑鼠懸停、點選、滾動等互動元素，[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)