<!DOCTYPE html>
<html>
<body>
<style>
td,th{
border:1px solid #BBB;
}
.content{
height:15px;
width:100px;
overflow:hidden;
text-overflow:ellipsis
}
.content:hover{
height:auto;
width:auto;
}
</style>
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr>
<td>Data1,1eeeeeeeeeee</td>
<td>Data2,1</td>
<td>Data3,1</td>
</tr>
<tr>
<td>Data1,2</td>
<td>Data2,2</td>
<td>Data3,2</td>
</tr>
<tr>
<td>Data1,3</td>
<td>Data2,3</td>
<td>Data3,3</td>
</tr>
</table>
</br>
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr>
<td><div class="content">Data1,1 first line - this is a kind-of long line
<br/>Data1,1 second line - this is a kind-of long line too
<br/>Data1,1 third line
<br/>Data1,1 fourth line
</div>
</td>
<td>Data2,1</td>
<td>Data3,1</td>
</tr>
<tr>
<td>Data1,2</td>
<td>Data2,2</td>
<td>Data3,2</td>
</tr>
<tr>
<td>Data1,3</td>
<td>Data2,3</td>
<td>Data3,3</td>
</tr>
</table>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-08-02 23:07:51