table表格信息过长显示省略，悬停显示详细信息
需求：表格td宽度设置百分比或者固定宽度，如果内容过长自动截掉并在文本末尾显示...，鼠标移动到文字上面显示全部内容；
（基于bootstrap实现）
实现效果：
css:
table{
table-layout:fixed;
}
td{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
在td标签添加如下代码：
<td class="hideCol" data-toggle="tooltip" data-placement="top" title="要显示的全部内容">要显示的全部内容（超过长度会自动截掉用...代替）</td>完整 html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table表格信息过长显示省略，悬停显示详细信息</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
table{
table-layout:fixed;
}
td{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
<body>
<table class="table table-bordered" >
<caption>table表格信息过长显示省略，悬停显示详细信息</caption>
<thead>
<tr>
<th>名称</th>
<th width="35%">城市</th>
<th>邮编</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td class="hideCol" data-toggle="tooltip" data-placement="top" title="行路难！行路难！多歧路，今安在？长风破浪会有时，直挂云帆济沧海。">行路难！行路难！多歧路，今安在？长风破浪会有时，直挂云帆济沧海。</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</body>
</html>