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>

table表格信息过长显示省略，悬停显示详细信息

table表格信息过长显示省略，悬停显示详细信息

css:

在td标签添加如下代码：

完整 html代码:

相关推荐