使用html及CSS實現在table中文字信息超過5個隱藏,鼠標移到時彈窗顯示全部:


使用html及CSS實現在table中文字信息超過5個隱藏,鼠標移到時彈窗顯示全部:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>li9.club</title>
<style type="text/css">

a.popup{
display: inline-block;
width:90px;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
}
a.popup div{
display:none;
background-color:#F1867C;
position:absolute;
border: 1px solid;
padding:4px;
}
a.popup:hover div{display:block;}


table {
width: 100%;
float: left;
table-layout:fixed;
width:500px;
border:1px solid #ccc;
border-collapse:collapse;

}

table tr {
line-height: 25px;
border:1px solid #ccc;
}

table th,td {
border:1px solid #ccc;
text-align:center;
}



</style>
</head>
<body>

<div>
<table>
<tr>
<th>姓名</th>
<th>個性簽名</th>
<th>性別</th>
<th>beizhu</th>
</tr>

<tr>
<td>張san
</td>
<td>
<a class="popup">我就是我發發發發發發發發發發發發發發發 </a>
</td>
<td>
<a class="popup">是的師傅師傅說的ddddddddddddddddddddddddddddddddddddddddddd字
<div>是的師傅師傅說的ddddddddddddddddddddddddddddddddddddddddddd字</div>
</a>
</td>
<td>
<a class="popup">懸發生的發生地方斯蒂芬森對方的身份ddddddddddddddddddddddddddddddddddddddddddd字
<div>懸發生的發生地方斯蒂芬森對方的身份ddddddddddddddddddddddddddddddddddddddddddd字 </div>
</a>
</td>
</tr>
</table>


</div>



</body>
<script>

</script>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM