盗贼源码论坛

 找回密码
 注册盗贼

QQ登录

只需一步,快速开始

站长推荐 QP搭建 认准司徒210770广告招租广告招租
查看: 708|回复: 1

[其它教程] 表格表头固定,内容多时滚动内容

[复制链接]

10

主题

27

帖子

70

积分

注册会员

Rank: 2

积分
70
金钱
23
发表于 2014-8-26 23:52:22 | 显示全部楼层 |阅读模式
  1. <font style="background-color: rgb(255, 255, 255);"><html> <head>  <style type="text/css">   * {    margin: 0;    padding: 0;   }      /*所有内容都在这个DIV内*/   .all {    width: 100%;    border: 1px solid #000000;   }      /*表头在这个DIV内*/   .title {    width: 500px;  /*这个宽度需要与下面的内容的DIV相等*/   }      /*表格样式*/   table {    width: 100%;  /*撑满上面定义的500像素*/    border: 1px solid #FF00FF;    border-collapse: collapse;  /*边线与旁边的合并*/    table-layout:fixed;   }   /*表头单元格(这里将表头单元格的样式设置成了和单元格一样,实际中可以改变)*/   table tr th {    border: 1px solid #FF00FF;    overflow: hidden;  /*超出长度的内容不显示*/    /*word-wrap: break-word;  内容将在边界内换行,这里显示省略号,所以不需要了*/    word-break: break-all;  /*字内断开*/    text-overflow: ellipsis;  /*当对象内文本溢出时显示省略标记(…),省略标记插入的位置是最后一个字符*/    white-space: nowrap;   }   /*单元格样式*/   table tr td {    border: 1px solid #FF00FF;    overflow: hidden;    /*word-wrap: break-word;  内容将在边界内换行,这里显示省略号,所以不需要了*/    word-break: break-all;    text-overflow: ellipsis;    white-space: nowrap;   }      /*容纳表格内容的DIV,这个DIV上放置滚动条*/   .content {    width: 100%;    height: 100px;  /*定一下高度,要不然就撑出来没滚动条了*/    overflow: scroll;  /*总是显示滚动条*/   }   /*真正存放内容的DIV*/   .content div {    width: 500px;  /*与表头的DIV宽度相同*/   }  </style> </head>  <body>  <div class="all">   <div class="title">    <table>     <tr>      <th style="width:10%">Operate</th>      <th style="width:20%">Date</th>      <th style="width:25%">Acknowledge</th>      <th style="width:15%">Other1</th>      <th style="width:15%">Other2</th>      <th>Other3</th>     </tr>    </table>   </div>      <div class="content">    <div>     <table>      <tr>       <td style="width:10%">Operate</td>       <td style="width:20%">Date</td>       <td style="width:25%">Acknowledge</td>       <td style="width:15%">Other1</td>       <td style="width:15%">Other2</td>       <td>Other3</td>      </tr>      <tr>       <td>Operate</td>       <td>Date</td>       <td>Acknowledge</td>       <td>Other21</td>       <td>Other22</td>       <td>Other3</td>      </tr>      <tr>       <td>Operate</td>       <td>Date</td>       <td>Acknowledge</td>       <td>Other31</td>       <td>Other32</td>       <td>Other3</td>      </tr>      <tr>       <td>Operate</td>       <td>Date</td>       <td>Acknowledge</td>       <td>Other41</td>       <td>Other42</td>       <td>Other3</td>      </tr>      <tr>       <td>Operate</td>       <td>2011-12-12 12:22:34 9987</td>       <td>Acknowledge</td>       <td>Other51</td>       <td>Other52</td>       <!--每个td上都要加个title,鼠标放上去时显示全部内容,我这里偷懒就写了一个-->       <td title="Other3hhhhhhhhhhhhhhhhhhhhhhhhaa">Other3hhhhhhhhhhhhhhhhhhhhhhhhaa</td>      </tr>     </table>    </div>   </div>  </div> </body></html></font>
复制代码


回复

使用道具 举报

0

主题

207

帖子

212

积分

中级会员

Rank: 3Rank: 3

积分
212
金钱
5
发表于 2015-2-1 02:13:47 | 显示全部楼层
:lol 谢谢楼主分享~~~
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册盗贼

本版积分规则

QQ|Archiver|手机版|小黑屋|盗贼源码论坛    

GMT+8, 2020-9-24 03:31 , Processed in 0.110577 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表