码迷,mamicode.com
首页 > 其他好文 > 详细

表格内容可伸缩代码实现

时间:2015-07-07 13:01:45      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:


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




版权声明:本文为博主原创文章,未经博主允许不得转载。

表格内容可伸缩代码实现

标签:

原文地址:http://blog.csdn.net/u010403387/article/details/46786777

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!