table表格信息过长显示省略，悬停显示详细信息；表格添加细边框

╰半夏微凉° 2024-02-19 19:21 69阅读 0赞

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

需求：表格td宽度设置百分比或者固定宽度，如果内容过长自动截掉并在文本末尾显示**...，鼠标移动到文字上面显示全部内容；**

（基于bootstrap实现）

##  ##

**实现效果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L011c2NsZWhlbmc_size_16_color_FFFFFF_t_70][]

### 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 **/

实现效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L011c2NsZWhlbmc_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L011c2NsZWhlbmc_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8cb22564b95a493794ad63fd5862889e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L011c2NsZWhlbmc_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/35b3a780fea14bf6814e38adcf65c56b.png