首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

报表表头固定,内容多时滚动内容

2012-10-09 
表格表头固定,内容多时滚动内容不多写废话了,都在代码注释中htmlheadstyle typetext/css* {margi

表格表头固定,内容多时滚动内容

不多写废话了,都在代码注释中

<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 /> 
/*容纳表格内容的DIV,这个DIV上放置滚动条*/ .content { width: 515px; height: 100px; /*定一下高度,要不然就撑出来没滚动条了*/ overflow: scroll; /*总是显示滚动条*/ overflow-x: hidden; }
13 楼 竹隐江南 2011-05-12   不搞前端,web涉及,不过看了楼主想法应该和我差不多,用了两个div。额额收藏下这合乎 14 楼 wqmain 2011-05-13   jquery flexigrid

热点排行