您的位置：首页 > 编程语言

表格内容可伸缩代码实现

2015-07-07 11:11 411 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航