表格内容可伸缩代码实现

原创 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>
			




相关文章推荐

HTML中构建自动伸缩的表格Table

文章原创,转载请说明文章来自:http://blog.csdn.net/xxd851116/archive/2009/04/01/4041616.aspx【引子】在开发的过程中,表格Table有个缺陷...

linux下C 线程池的原理讲解和代码实现(能自行伸缩扩展线程数)

转自 : http://lonelyc.blog.51cto.com/8072409/1315434 什么线程池,为什么要使用线程池?下面是一个比喻。 阶段一、一个医院,每天面对成千上万的病...

读取txt文件内容matlab代码实现

  • 2017年10月09日 19:13
  • 702B
  • 下载

用java代码实现从excel表格读取数据然后写入生成国际化配置文件properties

你看struts2国际化的properties文件发现这个格式都是xx=xxx,然后换行 所以只要能拿到excel中的数据(当然前提是excel数据以有规律的格式编写的)再写入到一个文本文件就可以了...

用jquery代码实现表格行列的增删操作(每行编号随之修改)

目标效果: 1.点击addRow按纽实现行的增加,并且编号连续呈増序。 2.点击deleteRow按纽实现行的删除,并且被删行对象后面的行编号与被删对象前面的行编号能连贯起来。(下示例从上...

可编辑的表格页面代码实现

有时候需要用代码编写在客户端网页中可编辑的表格以输入数据提交给后台数据库,做了一个小小的demo,效果图: 代码部分: 第十三...

自定义tableViewCell实现自定义表格(需代码实现)ui中tableviewcell设置成custom

设计自定义的原型单元格 对于很多应用来说,使用默认的单元格风格就OK了,但是我偏偏要在每一个单元格的右边加上一个一个图片来表示选手的评级,但是添加图片对于默认类型的单元格来说并不支持...

jquery固定表头不滚动让内容滚动的代码实现

使用jquery的表格特效,控制表格的表头固定而不滚动,当用户拖动表格滚动条的时候,表格的每行内容是滚动的,表头并不会滚动,这样可始终让表格的表头与内容相对应,方便查看表格中的内容,对一个表格来说,我...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表格内容可伸缩代码实现
举报原因:
原因补充:

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