Using html and CSS to achieve in the table in a text message over 5 hide mouse over pop show when all:

Using html and CSS to achieve in the table in a text message over 5 hide mouse over pop show when all:

<!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;
}

TH Table, TD {
border: 1px Solid #ccc;
text-align = left: Center;
}



</ style>
</ head>
<body>

<div>
<Table>
<TR>
<TH> Name </ TH>
<TH> signature </ TH>
<TH> gender </ TH>
<TH> beizhu </ TH>
</ TR>

<TR>
<td> Zhang San
</ td>
<td>
<a class="popup"> I is my hair hair hair hair hair hair hair hair hair hair hair hair hair hair hair </a>
</ td>
<td>
<a class="popup"> is the master teacher said ddddddddddddddddddddddddddddddddddddddddddd word
<div> is the master master said ddddddddddddddddddddddddddddddddddddddddddd word </ div>
</a>
</ td>
<td>
occur where the suspension occurred <a class="popup"> Stephenson each other's identity ddddddddddddddddddddddddddddddddddddddddddd word
<div> occur where the suspension occurred Stephenson each other's identity ddddddddddddddddddddddddddddddddddddddddddd word </ div>
</a>
</ td>
</ TR>
</ the Table>


</div>



</body>
<script>

</script>
</html>

Guess you like

Origin www.cnblogs.com/li9club/p/11522169.html