表格内容可伸缩代码实现

原创 2015年07月07日 11:11:25

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




可伸缩展示的ListView

【声明】此文出自指尖飞落的博客:http://blog.csdn.net/huntersnail 公司的项目是社区购物商城(o2o),大量的需要用到ListView的各种效果,ListView展...
  • linder_qzy
  • linder_qzy
  • 2016年12月21日 18:49
  • 260

jquery实现table表展开和收缩

jquery实现table表展开和收缩
  • fumier
  • fumier
  • 2015年01月20日 13:23
  • 4443

android 实现伸缩布局效果

最近项目实现下面的图示的效果,本来想用listview+gridview实现,但是貌似挺麻烦的于是就用flowlayout 来addview实现添加伸缩的效果,实现也比较简单。 mainActivi...
  • WTQ_DOMIAN
  • WTQ_DOMIAN
  • 2017年01月06日 16:47
  • 604

angular.js表格内容搜索过滤代码

angularFilter                                                 产品编号         产品名称 ...
  • AXBNMD
  • AXBNMD
  • 2017年03月30日 16:21
  • 991

纯javascript实现div的伸缩

javascript实现div的伸缩 只是需要更新div层的width和height即可。 但是需要考虑兼容性问题,首先给定一个div层,如果div层本身带边框,这个时候利用offsetXxx获取di...
  • xuzengqiang2
  • xuzengqiang2
  • 2014年03月11日 14:07
  • 391

Qt鼠标实现伸缩滑动窗口

Qt私活之实现伸缩滑动窗口   最近接的几个私活,用户都要求实现能伸缩滑动的窗口,即窗口的中央有滑动条可以动态改变子窗口的大小;于是我觉得有必要把这部分整理并写出来,因为毕竟伸缩滑动窗口在实际环境中...
  • tian_110
  • tian_110
  • 2015年01月05日 09:27
  • 1031

可伸缩系统的架构经验

最近,阅读了Will Larson的文章Introduction to Architecting System for Scale,感觉很有价值。作者分享了他在Yahoo!与Digg收获的设计可伸缩系...
  • happyduoduo1
  • happyduoduo1
  • 2016年06月29日 13:24
  • 713

Qt之QSplitter实现自由伸缩滑动窗口

一、简介         最近看到一篇Qt实现伸缩滑动的窗口的文章,但其代码不完整。便在此重新书写了完整的代码,并开源出来。窗口的中央有滑动条可以动态改变子窗口的大小,隐藏的按钮可以快速伸缩子窗口。...
  • caoshangpa
  • caoshangpa
  • 2017年11月16日 12:24
  • 160

常用的View(一)——标题栏渐变、伸缩的TextView、圆形头像、选图截图等功能的实现

滚动屏幕标题栏渐变根据屏幕的滚动,顶部标题栏逐渐由完全透明变成完全不透明实现原理:设置滚动监听,不断更新标题栏的透明度规则: 当头布局处于完全显示状态,设置标题栏透明度为完全透明 当头布局处于完全显示...
  • benhuo931115
  • benhuo931115
  • 2016年04月08日 22:39
  • 1329

模拟Material design实现可伸缩标题栏

开发项目需求,需要写一个可伸缩的头部。本来打算直接使用Material支持库来实现效果,Android Design Support Library 的 代码实验——几行代码,让你的 APP 变得花俏...
  • hwz2311245
  • hwz2311245
  • 2015年07月14日 18:50
  • 1299
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表格内容可伸缩代码实现
举报原因:
原因补充:

(最多只允许输入30个字)