table表格信息过长显示省略，悬停显示详细信息；表格添加细边框_bootstrap table表格信息过长显示省略,鼠标悬停显示详细信息-优快云博客

本文链接：https://blog.youkuaiyun.com/Muscleheng/article/details/88748053

博客主要介绍了table表格的两个功能实现。一是让表格信息过长时显示省略号，鼠标悬停显示详细信息，基于bootstrap实现，给出了td标签的css代码和完整html代码；二是自定义css实现表格细边框，给出了相应css代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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>

二、自定义css实现表格细边框

css代码：

/** 设置表格细边框 start **/
table{
	border: 1px solid #E4E8F3;
}
table,th,td{
	border-right: 1px solid #E4E8F3;
}
table,tr{
	border-bottom: 1px solid #E4E8F3;
}
/** 设置表格细边框 end **/

实现效果：