Home > Web Front-end > HTML Tutorial > css特效实现html表格显示部分内容,当鼠标移上去显示全部。_html/css_WEB-ITnose

css特效实现html表格显示部分内容,当鼠标移上去显示全部。_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 08:55:53
Original
2551 people have browsed it

在写网页的时候,经常需要用表格来展示数据,但是如果其中某个td中的数据太多,就会使整个页面不协调,如果固定了表格的宽度那么内容又不能全部显示出来,怎么办呢? 本人今天就遇到了这样一个小问题,现将其记录下来,留作以后需要时查看。


先上css代码:.newsInfo:hover {    background: #eee;    color: #333;    z-index: 999;}.newsInfo {    position: relative;    z-index: 0;}  .newsInfo span {	    display: none;} .newsInfo:hover span {    display: block;    position: absolute;    min-width:400px;    top: 28px;    left:100px;    border: 1px solid #cccccc;    background: #C1CDC1;    color: black;    padding: 5px;    text-align: left;    overflow: hidden;}.newInfoTruncation {    width:120px;    white-space:nowrap;     word-break:keep-all;     overflow:hidden;     text-overflow:ellipsis;}   然后html代码:<html><head>    <link href="index.css" rel="Stylesheet" type="text/css" /></head><body>    <div>        <a href="#"class="newsInfo">            <div class="newInfoTruncation">                参考消息网2月29日报道 韩媒称,中国正在迅速增强国防实力。去年年底和今年年初,中国先后采取了各种史无前例的强化军事力量的措施。有预测称,连续5年实现两位数增长的中国国防预算今年的涨幅将超出以往。            </div>            <span>                参考消息网2月29日报道 韩媒称,中国正在迅速增强国防实力。去年年底和今年年初,中国先后采取了各种史无前例的强化军事力量的措施。有预测称,连续5年实现两位数增长的中国国防预算今年的涨幅将超出以往。            </span>        </a>    </div></body></html>
Copy after login


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template