<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table .td1-hide{
list-style:none;
max-width:100px;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
margin-top:5px;
}
table .td2-show{
list-style:none;
max-width:100px;
word-break:break-all;
margin-top:5px;
}
.contain {
width:900px;
margin: 15px auto;
font-family: ‘Microsoft YaHei’; }
table {
width:100%;
text-align: center;
border:1px solid #e3e6e8;
border-collapse: collapse;
display: table; }
</style>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="contain">
<table>
<thead>
<th>电影名称</th>
table中td内容过长,则td省略号展示,鼠标单击展示/隐藏剩余内容
最新推荐文章于 2021-11-22 14:26:41 发布
这篇博客介绍了如何在HTML表格中处理TD单元格内容过长的情况,通过CSS设置实现内容省略号展示,并使用JavaScript实现鼠标点击时显示或隐藏剩余内容的交互效果。示例代码包括CSS样式和JavaScript函数。
摘要由CSDN通过智能技术生成